checkbox选取，全选

最新推荐文章于 2022-08-16 09:36:19 发布

DHASA

最新推荐文章于 2022-08-16 09:36:19 发布

阅读量413

点赞数

分类专栏： web前台

本文链接：https://blog.youkuaiyun.com/DHASA/article/details/50532322

版权

web前台专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用jQuery实现教师信息的勾选功能，包括单个勾选、全选及反选操作，并通过示例代码详细展示了如何绑定事件、更新状态及同步全选按钮的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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选中。