思路:先勾选,然后在点击事件中获取选中的内容
案例一
$('#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();
传给接口