webjs--全选和全不选的复选框

最新推荐文章于 2024-01-07 15:29:18 发布

dongmelon

最新推荐文章于 2024-01-07 15:29:18 发布

阅读量787

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/dongmelon/article/details/72890722

版权

webjs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

<input type="checkbox" name="book" id="all"  οnclick="cd()"/>全选<br>
<input type="checkbox" name="book" id="input1" οnclick="wy()"/>水浒传<br>
<input type="checkbox" name="book" id="input2" οnclick="wy()"/>西游记<br>
<input type="checkbox" name="book" id="input3" οnclick="wy()"/>红楼梦<br>

<script src="javascript/jquery-1.12.1.js"></script>
<script>
    //点击全选按钮的函数
    function cd(){
           if ($("#all").prop("checked")){
               $("#all").nextAll().prop("checked",true)  //全选
           }else {
               $("#all").nextAll().prop("checked",false)  //取消全选
           }
    }

    //单选函数
    function wy(){
               var isAll=true;   //存下来 遍历的结果
               for (var i = 0; i < 3; i++) {     //遍历所有的复选框 如果有一个为false，isAll就为false
                   var id = "#input" + (i + 1);
                   console.log(id+$(id).prop("checked"))
                   if (!$(id).prop("checked")) {
                       isAll = false;
                   }
               }
                if(isAll){      //遍历结束后看isAll的结果true为所有都选到了，false为至少有一个没选到
                    $("#all").prop("checked",true)
                }else{
                    $("#all").prop("checked",false)
                }

    }
</script>