input中复选框设置和判断选中和未选中的几种方法

html部分：

<!-- html -->
<input name="checkbox" class="checkbox" type="checkbox" data-bid="2" />

1、设置选中和未选中方法：

// js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    var checkbox = $('.checkbox');
    checkbox.prop("checked", true); // 设置元素选中
    checkbox.prop("checked", false); // 设置元素未选中
    checkbox.attr("checked", true); // 设置元素选中
    checkbox.attr("checked", false); // 设置元素未选中
</script>

注意： 这里prop和attr两者都可以设置选中的状态,不同的是prop操作的是js中原生对象属性获取和设置方式,而attr操作的是element对象的getAttribute()和setAttribute()两个方法

当设置checkbox.prop(“checked”, true);时：

当设置checkbox.attr(“checked”, true); 时：

2、判断选中和未选中方法：

// js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    var checkbox = $('.checkbox');
    checkbox.on('change', function () {
        console.log(checkbox.prop("checked")); // 选中为true,反之false
        console.log(checkbox.is(":checked")); // 选中为true,反之false
        
        // 通过html5自定义属性来判断,可根据不同情况用不同方法
        var bid = $('.checkbox:checked').data('bid'); // 获取元素
        console.log(bid); // 选中返回2,未选中返回undefined
        if (!bid) { // 未选中
            // 逻辑部分
            console.log(11);
            return false;
        } else { // 选中
            console.log(22);
        }
    });
</script>