问题背景:上一天,朋友告诉我要调试一个php的前端页面,这个页面为25个人,每个人都有4个列,每列都是分为abcd单选的选择,需要每列能最多选择a,b,c,d的数量,她不怎么会,帮她滤清楚思路后写了个demo给她:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table tr td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>工作能力</th>
<th>工作态度</th>
<th>责任心</th>
<th>团队协作</th>
</tr>
<tr>
<td rowspan="4">小1</td>
<td><input type="radio" class="one_a" name="a" />a</td>
<td><input type="radio" class="two_a" name="b"/>a</td>
<td><input type="radio" class="three_a" name="c"/>a</td>
<td><input type="radio" class="four_a" name="d"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="a"/>b</td>
<td><input type="radio" class="two_b" name="b"/>b</td>
<td><input type="radio" class="three_b" name="c"/>b</td>
<td><input type="radio" class="four_b" name="d"/>b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="a"/>c</td>
<td><input type="radio" class="two_c" name="b"/>c</td>
<td><input type="radio" class="three_c" name="c"/>c</td>
<td><input type="radio" class="four_c" name="d"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="a"/>d</td>
<td><input type="radio" class="two_d" name="b"/>d</td>
<td><input type="radio" class="three_d" name="c"/>d</td>
<td><input type="radio" class="four_d" name="d"/>d</td>
</tr>
<tr>
<td rowspan="4">小2</td>
<td><input type="radio" class="one_a" name="aa" />a</td>
<td><input type="radio" class="two_a" name="bb"/>a</td>
<td><input type="radio" class="three_a" name="cc"/>a</td>
<td><input type="radio" class="four_a" name="dd"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="aa"/>b</td>
<td><input type="radio" class="two_b" name="bb"/>b</td>
<td><input type="radio" class="three_b" name="cc"/>b</td>
<td><input type="radio" class="four_b" name="dd"/>b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="aa"/>c</td>
<td><input type="radio" class="two_c" name="bb"/>c</td>
<td><input type="radio" class="three_c" name="cc"/>c</td>
<td><input type="radio" class="four_c" name="dd"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="aa"/>d</td>
<td><input type="radio" class="two_d" name="bb"/>d</td>
<td><input type="radio" class="three_d" name="cc"/>d</td>
<td><input type="radio" class="four_d" name="dd"/>d</td>
</tr>
<tr>
<td rowspan="4">小3</td>
<td><input type="radio" class="one_a" name="aaa" />a</td>
<td><input type="radio" class="two_a" name="bbb"/>a</td>
<td><input type="radio" class="three_a" name="ccc"/>a</td>
<td><input type="radio" class="four_a" name="ddd"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="aaa"/>b</td>
<td><input type="radio" class="two_b" name="bbb"/>b</td>
<td><input type="radio" class="three_b" name="ccc"/>b</td>
<td><input type="radio" class="four_b" name="ddd"/>b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="aaa"/>c</td>
<td><input type="radio" class="two_c" name="bbb"/>c</td>
<td><input type="radio" class="three_c" name="ccc"/>c</td>
<td><input type="radio" class="four_c" name="ddd"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="aaa"/>d</td>
<td><input type="radio" class="two_d" name="bbb"/>d</td>
<td><input type="radio" class="three_d" name="ccc"/>d</td>
<td><input type="radio" class="four_d" name="ddd"/>d</td>
</tr>
<tr>
<td rowspan="4">小4</td>
<td><input type="radio" class="one_a" name="aaaa" />a</td>
<td><input type="radio" class="two_a" name="bbbb"/>a</td>
<td><input type="radio" class="three_a" name="cccc"/>a</td>
<td><input type="radio" class="four_a" name="dddd"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="aaaa"/>b</td>
<td><input type="radio" class="two_b" name="bbbb"/>b</td>
<td><input type="radio" class="three_b" name="cccc"/>b</td>
<td><input type="radio" class="four_b" name="dddd"/>b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="aaaa"/>c</td>
<td><input type="radio" class="two_c" name="bbbb"/>c</td>
<td><input type="radio" class="three_c" name="cccc"/>c</td>
<td><input type="radio" class="four_c" name="dddd"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="aaaa"/>d</td>
<td><input type="radio" class="two_d" name="bbbb"/>d</td>
<td><input type="radio" class="three_d" name="cccc"/>d</td>
<td><input type="radio" class="four_d" name="dddd"/>d</td>
</tr>
<tr>
<td rowspan="4">小5</td>
<td><input type="radio" class="one_a" name="a2" />a</td>
<td><input type="radio" class="two_a" name="b2"/>a</td>
<td><input type="radio" class="three_a" name="c2"/>a</td>
<td><input type="radio" class="four_a" name="d2"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="a2" checked="checked" />b</td>
<td><input type="radio" class="two_b" name="b2" checked="checked" />b</td>
<td><input type="radio" class="three_b" name="c2" checked="checked" />b</td>
<td><input type="radio" class="four_b" name="d2" checked="checked" />b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="a2"/>c</td>
<td><input type="radio" class="two_c" name="b2"/>c</td>
<td><input type="radio" class="three_c" name="c2"/>c</td>
<td><input type="radio" class="four_c" name="d2"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="a2"/>d</td>
<td><input type="radio" class="two_d" name="b2"/>d</td>
<td><input type="radio" class="three_d" name="c2"/>d</td>
<td><input type="radio" class="four_d" name="d2"/>d</td>
</tr>
<tr>
<td rowspan="4">小6</td>
<td><input type="radio" class="one_a" name="a22" />a</td>
<td><input type="radio" class="two_a" name="b22"/>a</td>
<td><input type="radio" class="three_a" name="c22"/>a</td>
<td><input type="radio" class="four_a" name="d22"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="a22"/>b</td>
<td><input type="radio" class="two_b" name="b22"/>b</td>
<td><input type="radio" class="three_b" name="c22"/>b</td>
<td><input type="radio" class="four_b" name="d22"/>b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="a22"/>c</td>
<td><input type="radio" class="two_c" name="b22"/>c</td>
<td><input type="radio" class="three_c" name="c22"/>c</td>
<td><input type="radio" class="four_c" name="d22"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="a22"/>d</td>
<td><input type="radio" class="two_d" name="b22"/>d</td>
<td><input type="radio" class="three_d" name="c22"/>d</td>
<td><input type="radio" class="four_d" name="d22"/>d</td>
</tr>
<td rowspan="4">小7</td>
<td><input type="radio" class="one_a" name="a221" />a</td>
<td><input type="radio" class="two_a" name="b221"/>a</td>
<td><input type="radio" class="three_a" name="c221"/>a</td>
<td><input type="radio" class="four_a" name="d221"/>a</td>
</tr>
<tr>
<td><input type="radio" class="one_b" name="a221"/>b</td>
<td><input type="radio" class="two_b" name="b221"/>b</td>
<td><input type="radio" class="three_b" name="c221"/>b</td>
<td><input type="radio" class="four_b" name="d221"/>b</td>
</tr>
<tr>
<td><input type="radio" class="one_c" name="a221"/>c</td>
<td><input type="radio" class="two_c" name="b221"/>c</td>
<td><input type="radio" class="three_c" name="c221"/>c</td>
<td><input type="radio" class="four_c" name="d221"/>c</td>
</tr>
<tr>
<td><input type="radio" class="one_d" name="a221"/>d</td>
<td><input type="radio" class="two_d" name="b221"/>d</td>
<td><input type="radio" class="three_d" name="c221"/>d</td>
<td><input type="radio" class="four_d" name="d221"/>d</td>
</tr>
</table>
<script src="jquery-1.3.2.min.js"></script>
<script>
//7个人 3a 2b 1c 1d
/* var n=0;
$("input").each(function(i,v){
$(this).click(function(){
if ($(this).attr("checked")) {
n+=1;
}else{
n-=1;
}
console.log(n)
})
}) */
$(function(){
//循环取当前选中的b并置灰对应的所有a,b,c,d
$(":checked").each(function(){
$('input[name="' + $(this).attr("name") + '"]').removeClass().addClass("setCheckedB");
$('input[name="' + $(this).attr("name") + '"]').attr("disabled",true);
})
var num = ['one_a','two_a','three_a','four_a','one_b','two_b','three_b','four_b','one_c','two_c','three_c','four_c','one_d','two_d','three_d','four_d'];
$.each(num,function (k,v) {
//获取对应的行数据
var str = v;
var arr=str.split("_");
var first = arr[0];
var allStra = "."+first+"_a";
var allStrb = "."+first+"_b";
var allStrc = "."+first+"_c";
var allStrd = "."+first+"_d";
$("."+v).click(function () {
if(v == 'one_a' || v == 'two_a' || v == 'three_a' || v == 'four_a'){
console.log("A",$("."+v+":checked").length)
if($("."+v+":checked").length> 2){
alert('每列最多选择3个A');
$("."+v).each(function (kk,vv) {
if(!$(vv).attr("checked")){
$(vv).attr("disabled",true)
}
})
}else {
$("."+v).each(function (kk,vv) {
$(vv).attr("disabled",false)
})
}
//点击a时校验b,c,d
if($(allStrb+":checked").length< (2-1)){
$(allStrb).removeAttr("disabled");
}
if($(allStrc+":checked").length< 1){
$(allStrc).removeAttr("disabled");
}
if($(allStrd+":checked").length< 1){
$(allStrd).removeAttr("disabled");
}
}else if(v == 'one_b' || v == 'two_b' || v == 'three_b' || v == 'four_b'){
console.log("b",$("."+v+":checked").length)
if($("."+v+":checked").length>= 1){
alert('每列最多选择2个B');
$("."+v).each(function (kk,vv) {
if(!$(vv).attr("checked")){
$(vv).attr("disabled",true)
}
})
}else {
$("."+v).each(function (kk,vv) {
$(vv).attr("disabled",false)
})
}
//点击b时校验a,c,d
if($(allStra+":checked").length< 3){
$(allStra).removeAttr("disabled");
}
if($(allStrc+":checked").length< 1){
$(allStrc).removeAttr("disabled");
}
if($(allStrd+":checked").length< 1){
$(allStrd).removeAttr("disabled");
}
}else if(v == 'one_c' || v == 'two_c' || v == 'three_c' || v == 'four_c'){
if($("."+v+":checked").length>= 1){
alert('每列最多选择1个C');
$("."+v).each(function (kk,vv) {
if(!$(vv).attr("checked")){
$(vv).attr("disabled",true)
}
})
}else {
$("."+v).each(function (kk,vv) {
$(vv).attr("disabled",false)
})
}
//点击c时校验b,a,d
if($(allStra+":checked").length< 3){
$(allStra).removeAttr("disabled");
}
if($(allStrb+":checked").length< (2-1)){
$(allStrb).removeAttr("disabled");
}
if($(allStrd+":checked").length< 1){
$(allStrd).removeAttr("disabled");
}
}else if(v == 'one_d' || v == 'two_d' || v == 'three_d' || v == 'four_d'){
if($("."+v+":checked").length>= 1){
alert('每列最多选择1个D');
$("."+v).each(function (kk,vv) {
if(!$(vv).attr("checked")){
$(vv).attr("disabled",true)
}
})
}else {
$("."+v).each(function (kk,vv) {
$(vv).attr("disabled",false)
})
}
//点击d时校验b,c,a
if($(allStra+":checked").length< 3){
$(allStra).removeAttr("disabled");
}
if($(allStrb+":checked").length< (2-1)){
$(allStrb).removeAttr("disabled");
}
if($(allStrc+":checked").length< 1){
$(allStrc).removeAttr("disabled");
}
}
})
})
})
</script>
</body>
</html>
这个demo只有10个人,10个人选择为每个列相关3a2b1c1d,在最开始,使用拼接的方式获取了当次点击对应的是哪个列,并拼接处当次列对应的abcd的class,方便下边做校验判断用,代码直接贴下去就能用(自己下载jQuery包)