1、获取到checkbox要显示的内容,初始化。要点:给label和checkbox赋id,并且将想要获取的值放到html中是最稳定的,要的时候去取。并且尽量在给checkbox的checked属性赋值时,尽量使用prop('checked',true);attr会有bug。
$.each(data.model.data.teacherInfoList, function(i, oneData) {
$(".teacher_content").append(
'<div class="teacher_option_list">'+
'<div class="radiocheckbox_item">'+
'<label for="radio-single" class="label_check teacher_option'+i+'">'+
'<input type="checkbox" class="teacher_input_select'+i+'" name="teacher_radio_option"/>'+
'</label></div>'+'<div class="teachername_div teacher_name'+i+'"></div></div>'
);
$('.teacher_name'+i).text(oneData.memberName);
$(".teacher_option"+i).attr('for','radio-single'+(i+1));
$(".teacher_input_select"+i).attr('id','radio-single'+(i+1));
$(".teacher_input_select"+i).attr('teachername',oneData.memberName);
$(".teacher_input_select"+i).attr('teacherid',oneData.memberRoleId);
if(toInitTeacher(oneData.memberRoleId)==true){
$('label[for="radio-single'+(i+1)+'"]').removeClass("c_off").addClass("c_on");
$('#radio-single'+(i+1)).prop('checked',true);
}
$('.teacher_input_select'+i).on('click',function (e) {
if(e.target.checked){
teacherIdList.push(oneData.memberRoleId);
teacherNameList.push(oneData.memberName);
$(this).parent().removeClass("c_off").addClass("c_on");
$('#radio-single'+(i+1)).attr('checked',true);
$(".teacherall_togg_checkbox").attr(
"ischeck",<span style="font-family: Arial, Helvetica, sans-serif;">$("input[name='teacher_radio_option']").length == $("input[name='teacher_radio_option']:checked").length? </span>
<span style="font-family: Arial, Helvetica, sans-serif;"> "0" : "1"); </span>
if($(".teacherall_togg_checkbox").attr("ischeck")==0){
$('.teacherall_togg_checkbox').attr('src','resources/images/checkbox_on.png');
}
}else{
$(this).parent().removeClass("c_on").addClass(" c_off");
$('#radio-single'+(i+1)).attr('checked',false);
$(".teacherall_togg_checkbox").attr("ischeck",$("input[name='teacher_radio_option']").length == $("input[name='teacher_radio_option']:checked").length ? "0" : "1");
if($(".teacherall_togg_checkbox").attr("ischeck")==1){
$('.teacherall_togg_checkbox').attr('src','resources/images/checkbox_off.png');
}
for(var j=0;j<teacherIdList.length;j++){
if(teacherIdList[j] == oneData.memberRoleId){
teacherIdList.remove(j);
teacherNameList.remove(j);
}
}
}
});
});
2、全选:(全选时根据input的name获取选择范围的,通过id来获取每个name和id)
if ($(this).attr('ischeck')=='1') {
//全选按钮
$('.teacherall_togg_checkbox').attr('src','resources/images/checkbox_on.png');
$(this).attr('ischeck','0');
//全选按钮点击选中所有
teacherIdList=[];
teacherNameList=[];
var teacherCheckbox = $('input[name="teacher_radio_option"]');
for(var i=0;i<teacherCheckbox.length;i++){
teacherNameList.push($('#radio-single'+(i+1)).attr('teachername'));
teacherIdList.push($('#radio-single'+(i+1)).attr('teacherid'));
$('label[for="radio-single'+(i+1)+'"]').removeClass("c_off").addClass("c_on");
$('#radio-single'+(i+1)).prop('checked',true);
}
} else {
$('.teacherall_togg_checkbox').attr('src','resources/images/checkbox_off.png');
$(this).attr('ischeck','1');
//点击全不选
var teacherCheckbox = $('input[name="teacher_radio_option"]');
for(var i=0;i<teacherCheckbox.length;i++){
$('label[for="radio-single'+(i+1)+'"]').removeClass("c_on").addClass("c_off");
$('#radio-single'+(i+1)).prop('checked',false);
}
teacherIdList=[];
teacherNameList=[];
}
3、通过子选项来控制全选按钮(当然这个处理要再checkbox得点击事件中做)
$(".teacherall_togg_checkbox").attr("ischeck",$("input[name='teacher_radio_option']").length == $("input[name='teacher_radio_option']:checked").length? "0" : "1");
如果选择了得按钮的长度等于总长度,则赋值为选中。4、再次点进来(如果是个弹出框,得将选过的再次选中)/*判断某一个老师按钮是否选中*/
function toInitTeacher(id){
if(teacherIdList.length>0){
for(var j=0;j<teacherIdList.length;j++){
if(teacherIdList[j]==id){
return true;
}
}
}
}
在初始化时,每个循环中传入当前循环的id来比较是否当前checkbox选中。