javascript - 如何让全选选中-PHP中文网问答

sel-all里的1、2、3、4、5、6全部选中时，全选框selectAll也显示选中。
求大神们不要给负分啊啊啊··我只是个菜鸟`请输入代码
<!doctype html>

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<p class="sel-all">
    <input type="checkbox"  class="check-sel"/>1
    <input type="checkbox"  class="check-sel" />2
    <input type="checkbox"  class="check-sel"/>3
    <input type="checkbox"  class="check-sel" />4
    <input type="checkbox"  class="check-sel"/>5
    <input type="checkbox"  class="check-sel" />6
</p>
<input type="checkbox" id="selectAll" />全选
</body>
</html>
<script type="text/javascript"> 
$(function(){
    $('#selectAll').click(function(){
        $('.check-sel').attr('checked', $(this).attr('checked'));
    });
    $('.check-sel').click(function(){         
         var selnum=$('.sel-all').find('.check-sel');      
             if(selnum.attr('checked'))
             { 
                $('.sel-all .check-sel').each(function(){
                    console.log(selnum)
                   $("#selectAll").attr('checked',true);    
                });
             } 
             else{
                  $("#selectAll").removeAttr('checked');    
                 }        
       
   });
    
});

</script>

$(function () { var $selectAll = $('#selectAll'); var $selectItems = $('.check-sel'); $selectAll.click(function () { $selectItems.attr('checked', $selectAll.attr('checked')); }); $selectItems.click(function () { $selectAll.attr('checked', $selectItems.filter(':checked').length === $selectItems.length); }); });

全部回复(4)

巴扎黑2017-04-11 10:40:15 4楼

用的jQuery版本够老的啊

赞 +0

添加回复

阿神2017-04-11 10:40:15 3楼

你这逻辑部分也已经捋清楚了，开始写代码就可以了啊，难道是不知道如何手动选中？

大家讲道理2017-04-11 10:40:15 2楼

可以考虑用angular或者vue来做，应该会简单很多吧

PHP中文网2017-04-11 10:40:15 1楼

楼主可以分层进行处理，每一个外层的"<input type='checkbox'>"标签绑定一个Click事件，Click事件中去触发Dom结构中相邻子节点的Click事件，然后子节点绑定的Click事件也是去触发相邻子节点的Click事件，层层嵌套就OK。
要注意的一点是，绑定Click事件时，需要判断一下event.target的值，即把"鼠标点击触发事件"和"父元素触发事件"两种情况分开处理。
不贴具体代码，有什么问题可以评论提问。