简单的全选反选

在代码中注释很清楚，思路很清晰，写了js和jquery两种写法。喜欢用谁就用谁！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的全选反选demo</title>

<style>
* {
    padding:0;
    margin:0;
}
.wrap {
    width:300px;
    margin:20px auto 0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
    border:1px solid #c0c0c0;
    width:300px;
}
th,td {
    border:1px solid #d0d0d0;
    color:#404060;
    padding:10px;
}
th {
    background-color:#09c;
    font:bold 16px "微软雅黑";
    color:#fff;
}
td {
    font:14px "微软雅黑";
}
tbody tr {
    background-color:#f0f0f0;
}
tbody tr:hover {
    cursor:pointer;
    background-color:#fafafa;
}
</style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>菜名</th>
                <th>饭店</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" name="choose"/>
                </td>
                <td>红烧肉</td>
                <td>家里蹲</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="choose"/>
                </td>
                <td>西红柿鸡蛋</td>
                <td>家里蹲</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="choose"/>
                </td>
                <td>红烧狮子头</td>
                <td>家里蹲</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="choose"/>
                </td>
                <td>日式肥牛</td>
                <td>家里蹲</td>
            </tr>

        </tbody>
    </table>
</div>
<script>
 var all = document.getElementById("j_cbAll");
 var tbody = document.getElementById("j_tb");
 var checkboxs = tbody.getElementsByTagName("input");
 //给全选反选checkbox绑定点击事件
 all.onclick = function() {
    //当点击1的时候循环遍历除过1之外的所有checkbox，并讲这些checkbox的状态设置的和1一样
     for (var i = 0; i < checkboxs.length; i++) {
        //当前遍历到了的checkbox
         var checkbox = checkboxs[i];
         //this.checked表示1的选中状态，this指的是1
         //所以这句是将1的状态设置为当前遍历到的checkbox
         checkbox.checked = this.checked;
     }
 };
 //循环给所有除过1的checkbox绑定click事件
 for (var i = 0; i < checkboxs.length; i++) {
     checkboxs[i].onclick = function() {
        //作为一个标记表示1应该选中还是不选中
         var isCheckedAll = true;
         //循环遍历除1以外的所有checkbox
         for (var i = 0; i < checkboxs.length; i++) {
            //只要有一个是未选中的，那么1就应该是未选中的，将isCheckedAll设置为false,循环就可以结束了
             if (!checkboxs[i].checked) {
                 isCheckedAll = false;
                 break;
             }
         }
         //将1的状态更新为isCheckedAll
         all.checked = isCheckedAll;
     };
 }
</script>
<!--下面代码是Jquery代码实现方法。思路一样-->
<script src="../js/jquery.js"></script>
<script>
    var checkboxs = $("input[name='choose']");
    $("#j_cbAll").click(function () {
        //此时的this才指的是id=j_cbAll的checkbox，因为进入$.each后作用域就自动切换成checkboxs中的内容，所以要吧当前的this保存起来待会在$.each中用
        var thisAll = this;
        //$.each中的function的作用域是checkboxs数组中的内容
        $.each(checkboxs, function (i, item) {
            //item.checked = this.checked;
            //此时this指的是遍历到的元素，thisAll就是我们保存的id=j_cbAll的checkbox
            this.checked = thisAll.checked;
        });
    });

    $("input[name='choose']").on("click", function () {
        var isCheckedAll = true;
        $.each(checkboxs, function (i, item) {
            if(!this.checked){
                isCheckedAll = false;
                return false;
            }
        })
        $("#j_cbAll").prop("checked",isCheckedAll);
    })
</script>
</body>
</html>
原地址：http://www.17sucai.com/pins/demoshow/24737
posted @ 2017-06-13 17:16 三高娘子阅读(266) 评论(0) 编辑收藏举报
三高娘子

简单的全选反选

公告
