jQuery操作复选框checkbox技巧总结

设置选中、取消选中、获取被选中的值、判断是否选中等

一、checked属性定义

先了解下input标签的checked属性：

1、HTML <input> checked 属性

定义和用法

• checked 属性是一个布尔属性
• checked 属性规定在页面加载时应该被预先选定的 <input> 元素
• checked 属性适用于 <input type="checkbox"> 和 <input type="radio">
• checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置

二、checked属性的用法

1、jQuery判断checked是否是选中状态的三种方法

// 方法一：attr() - 返回 "checked" 或 "undefined"
$("#cb1").attr('checked');

// 方法二：prop() - 返回 true/false （推荐）
$("#cb1").prop('checked');

// 方法三：is() - 返回 true/false （推荐）
$("#cb1").is(':checked');  // 别忘记冒号哦

2、jQuery赋值checked的写法

不推荐写法（所有jQuery版本都可以，但已过时）：

// 以下写法不推荐使用
$("#cb1").attr("checked", "checked");
$("#cb1").attr("checked", true);
$("#cb1").attr("checked", "true");

推荐写法 - prop()方法：

// 标准写法，推荐！
$("#cb1").prop("checked", true);

// map键值对
$("#cb1").prop({checked: true});

// 函数返回值
$("#cb1").prop("checked", function() {
    return true;  // 函数返回true或false
});

三、标签中checked="checked"已有，但却不显示打勾的解决办法

在做web项目的时候，做了一个功能，就是当勾选栏目，把所有的角色全勾上。

错误做法（使用attr导致的问题）：

// 第一遍勾选和取消有效，但第二遍以后就没反应了
function check(id, check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").attr("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").attr("checked", false);        
    }
}

正确做法（使用prop）：

// 使用prop()方法解决
function check(id, check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").prop("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").prop("checked", false);        
    }
}

四、jQuery操作checkbox技巧总结

1、获取单个checkbox选中项的值

// 三种写法
$("#chx1").find("input:checkbox:checked").val()
$("#chx1").find("input[type='checkbox']:checked").val();
$("#chx1").find("input[name='ck']:checked").val();

2、获取多个checkbox选中项

// 方法一：遍历所有复选框
$("#chk1").find('input:checkbox').each(function() {
    if ($(this).prop('checked') == true) {
        console.log($(this).val());  // 打印当前选中的值
    }
});

// 方法二：获取所有选中值放到数组
function getCheckBoxVal() { 
    var chk_value = []; 
    $("#chk1").find('input[name="test"]:checked').each(function() {
        chk_value.push($(this).val()); 
    }); 
    alert(chk_value.length == 0 ? '你还没有选择任何内容！' : chk_value); 
}

3、设置第一个checkbox为选中

$("#chk1").find('input:checkbox:first').prop("checked", true);
// 或者
$("#chk1").find('input:checkbox').eq(0).prop("checked", true);

4、设置最后一个checkbox为选中

$("#chk1").find('input:checkbox:last').prop("checked", true);

5、根据索引值设置任意checkbox为选中

// 根据索引设置
$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);

// 同时选中多个（切片方式）
$("#chk1").find('input:checkbox').slice(1, 2).prop('checked', true);

6、根据value值设置checkbox为选中

$("#chk1").find("input:checkbox[value='1']").prop('checked', true);
// 或者
$("#chk1").find("input[type='checkbox'][value='1']").prop('checked', true);

7、删除checkbox

// 删除value=1的checkbox
$("#chk1").find("input:checkbox[value='1']").remove();

// 删除第3个checkbox（索引从0开始）
$("#chk1").find("input:checkbox").eq(2).remove();

8、全部选中或全部取消选中

// 全部选中
$("#chk1").find('input:checkbox').each(function() {
    $(this).prop('checked', true);
});

// 全部取消选中
$("#chk1").find('input:checkbox').each(function () {
    $(this).prop('checked', false);
});

9、选中所有奇数项或偶数项

// 选中所有偶数
$("#chk1").find("input[type='checkbox']:even").prop("checked", true);

// 选中所有奇数
$("#chk1").find("input[type='checkbox']:odd").prop("checked", true);

10、反选（取反操作）

// 方法一：
$("#btn4").click(function() { 
    $("input[type='checkbox']").each(function() { 
        if ($(this).prop("checked")) { 
            $(this).prop("checked", false); 
        } else { 
            $(this).prop("checked", true); 
        } 
    });    
}); 

// 方法二：
$("#btn4").on('click', function() { 
    $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue) {
        return !oldValue;
    });
});

五、扩展：实际应用场景

全选/全不选功能实现

// HTML结构
// <input type="checkbox" id="checkAll"> 全选
// <input type="checkbox" name="item"> 选项1
// <input type="checkbox" name="item"> 选项2
// <input type="checkbox" name="item"> 选项3

// jQuery实现
$("#checkAll").click(function() {
    $("input[name='item']").prop("checked", $(this).prop("checked"));
});

// 子选项变化时更新全选状态
$("input[name='item']").click(function() {
    var allChecked = $("input[name='item']").length === $("input[name='item']:checked").length;
    $("#checkAll").prop("checked", allChecked);
});

表单提交前验证

function validateForm() {
    var checkedCount = $("input[name='agree']:checked").length;
    if (checkedCount === 0) {
        alert("请阅读并同意用户协议！");
        return false;
    }
    return true;
}

动态设置选中状态

// 根据后台返回值设置选中
$.ajax({
    url: "/api/getUserRoles",
    success: function(data) {
        $("input[name='role']").each(function() {
            if (data.roles.includes($(this).val())) {
                $(this).prop("checked", true);
            }
        });
    }
});