PYTHON第五十九天：用jQuery方式实现‘标签复选框’的【全选、反选和取消】

利用jquery实现<input>复选框的“全选、反选和取消”的方式如下：

 

1、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分解示例</title>
</head>
<body>
<table border="1px">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>小白</td>
            <td>伪娘</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>大黄</td>
            <td>伸舌头</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>杜马特</td>
            <td>吹牛逼</td>
        </tr>
    </tbody>
</table>
<button id="all" onclick="selectAll()">全选</button>
<button id="cal" onclick="cancelAll();">取消</button>
<button id="rev" onclick="reverseAll();">反选</button>

<script>
    function selectAll() {
        // 找所有的checkbox，把表格中所有的checkbox都选中
        $(":checkbox").prop("checked",true)
    }
    function cancelAll() {
        // 找所有的checkbox，把表格中所有的checkbox都不选中
        $(":checkbox").prop("checked",false)
    }
    function reverseAll() {
        // 把选中的变成没选中
        //        $(":checkbox:checked").prop("checked", false);
        // 把没选中的变成选中的
        //        $(":checkbox:not(:checked)").prop("checked", true)
        // 上面的都不行，必须有个判断
        // 循环去挨个判断
        // 如果被选中就取消选中 .prop("checked")  .prop("checked", )
         // 如果没选中就选中
        $(":checkbox").each(function () {
            if ($(this).prop("checked")){
                $(this).prop("checked",false)
            }else{
                $(this).prop("checked",true)
                }
            }
        )
    }
</script>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
用jQuery实现checkbox复选框的“全选、反选、取消”

 

2、效果截图

 

posted @ 2017-11-21 19:11  主啊~  阅读(254)  评论(0)  编辑  收藏  举报