checkbox复选框全选与全不选 并且获取选中的值

思路：先勾选，然后在点击事件中获取选中的内容

案例一

$('#quan').on("click",function(){
	if($(this).is(':checked')){
		$('input[name="checkbox"]').each(function(){
			$(this).prop("checked",true);
		});
	}else{
		$('input[name="checkbox"]').each(function(){
			$(this).prop("checked",false);
		});
	}
})	

在删除按钮这循环获取选中的值

$('[data-role="del"]').click(function(){//删除
	var checkbox = [];
	$("[name=checkbox]:checkbox").each(function(i){
		if ($(this).prop("checked") == true){
			checkbox.push($(this).val()); //获取值
		} 
	})
	if(checkbox.length > 0){
		var wrlidarr = []; 
		checkbox.forEach(function (item) {
			wrlidarr.push(parseInt(item)); //将string数组转为int数组
		})
		console.log(wrlidarr);
		let para = {
			"wrlid":wrlidarr
		}
		mui.showLoading("删除中...","div");
		batchremoveWrongtestlib(para).then(res => {
			if(res.code = 1){
				mui.hideLoading();
				getwrongtllist();
				$('.wrongfixlist').show();
				$('.wrongfixlist1').hide();
			}
		})
	}else{
		mui.toast('选择需要删除的试题',{ duration:'short', type:'div'}) 
	}
});

案例二

$(document).on('click','[data-role="choose"]',function(){
	var _checked = $(this).find('[data-role="edidchecked"]');
	var checkbox=[];
	if(_checked.prop("checked")){
		_checked.prop("checked", false);
		$(this).find('.studentlist-checked').removeClass('active');
	}else{
		_checked.prop("checked", true);
		$(this).find('.studentlist-checked').addClass('active');
	}
	$("[name=checkName]:checkbox").each(function(i){
	   if ($(this).prop("checked") == true){
	       checkbox.push($(this).val()); // 获取值
	   } 
	})
	console.log(checkbox);
})

知识点用法总览

获取选中值：

1、CheckBox为单选：
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、CheckBox为多选：
$('input:checkbox').each(function() {
  if ($(this).attr('checked') ==true) { alert($(this).val());}
});

3、全选：
$('input:checkbox').each(function() {$(this).attr('checked', true);});

4、全不选：
$('input:checkbox').each(function () {$(this).attr('checked',false);});

5、CheckBox回填：
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(‘+索引变量+’).attr("checked",'true');
或者
$('input:checkbox[value='+CheckBox值+']').attr('checked','true');
多个回填：
$('input:radio').slice(0,2).attr('checked','true');

6、CheckBox只能单选
$(":checkbox").click(function(){ 
　　if($(this).is(':checked')){
　　　　$(this).attr('checked',true).siblings().attr('checked',false);
　　}
});

jquery 获取多个checkbox的value值

$(document).ready(function(){
    var idsstr = "";
    var isc = "";
    $("#a input[name=chkId]").each(function(){ //遍历table里的全部checkbox
        idsstr += $(this).val() + ","; //获取所有checkbox的值
        if($(this).attr("checked")) //如果被选中
            isc += $(this).val() + ","; //获取被选中的值
    });
    if(idsstr.length > 0) //如果获取到
        idsstr = idsstr.substring(0, idsstr.length - 1); //把最后一个逗号去掉
    if(isc.length > 0) //如果获取到
        isc = isc.substring(0, isc.length - 1); //把最后一个逗号去掉
    alert("所有checkbox的值：" + idsstr);
    alert("被选中checkbox的值：" + isc);
});

全选年级

//点击全选 勾选所有的checkbox，取消其中一个 全选取消勾选，所有的checkbox勾选，全选也勾上
$(document).on('click','[data-role="gradeall"]',function(){
	if($(this).is(':checked')){
		$('[name="gradedesc[]"]').each(function(){
			$(this).prop("checked",true);
		});
	}else{
		$('input[name="gradedesc[]"]').each(function(){
			$(this).prop("checked",false);
		});
	}
})
var gradelen = $('[name="gradedesc[]"]').length;
$(document).on('click','[name="gradedesc[]"]',function(){
	$("[name='gradedesc[]']:checked").each(function(i){
		if ($(this).prop("checked") == true){
			if((i+1) == gradelen){
				$('[data-role="gradeall"]').prop("checked",true);
			}else{
				$('[data-role="gradeall"]').prop("checked",false);
			}
		} 
	})
})


获取选中的checkbox
var gradedesc = $('[name="gradedesc[]"]:checked').val();
传给接口