Jquery判断复选框的 全选、反选、单选

一、attr，prop对比

attr最恶心的就是，你输出一个元素的checked属性时，如果你的元素提前定义了checked属性，此时你输出的永远都是‘checked’

如果你没有提前定义的话输出的永远都是‘undefined’，这点很不友好，果断弃了

 

 attr，prop进行对比，prop比attr更适用的【没有做is的对比检测】

二、使用prop实现全选、全不选、反选、单选的各种互联

<div>
    <input name="chkItem" id="testCheckbox" checked="checked" type="checkbox" value="1" />1
    <input name="chkItem" type="checkbox" checked="checked" value="2" />2
</div>
<div>
    <input id="btnCheckAll" type="button" value="全选" />
    <input id="btnCheckNone" type="button" value="全不选" />
    <input id="btnCheckReverse" type="button" value="反选" />
</div>

<script>
    // 全选
    $("#btnCheckAll").click(function () {
        $("input[name = 'chkItem']").prop("checked", true)
        console.log($("#testCheckbox").prop("checked"))
    })
    // 全不选
    $("#btnCheckNone").click(function () {
        $("input[name = 'chkItem']").prop("checked", false)
        console.log($("#testCheckbox").prop("checked"))
    })
    // 反选
    $("#btnCheckReverse").click(function () {
        $("input[name = 'chkItem']").each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });
    // 单独选择一个复选框事件
    $("#testCheckbox").change(function (event) {
        if (document.getElementById("testCheckbox").checked) {
            console.log('被选择');
        }
        else {
            console.log('取消选择');
        }
    }); 
</script>