表单全选按钮练习

<input type="checkbox" name="" id="ckAll"/> 全选/取消

              <ul class="ulstyle">

                    <li><input type="checkbox" name="" value="" /> 新闻列表</li>

                    <li><input type="checkbox" name="" value="" />新闻列表</li>

                    <li><input type="checkbox" name="" value="" />新闻列表</li>

                    <li><input type="checkbox" name="" value="" />新闻列表</li>

              </ul>

             

            <script type="text/javascript">

                var ckAll = document.getElementById('ckAll');

                var ckBoxs = document.querySelectorAll('.ulstyle input');

                // console.log(ckBoxs);

                    ckAll.onclick = function(){

                        //ckAll.checked =checked ->   ckAll.checked->true ->this.checked;  

                        // console.log(ckAll.checked);

                        var state = this.checked;//ckall选中时结果时true 不选中时是false                  

                        //我们需要把state的结果 赋值给ckboxs

                        for (var i = 0; i < ckBoxs.length; i++) {

                            ckBoxs[i].checked = state;

                        }

                       

                    }

                   

                    //我们给每一个input元素加单击事件

                    for (var i = 0; i < ckBoxs.length; i++) {

                        ckBoxs[i].onclick = function(){

                           

                            //我们添加标记 默认下面所有的input元素都被选中

                            var flag = true;

                            //循环看 下面input谁没有被选中

                            for (var j = 0; j < ckBoxs.length; j++) {

                                // ckBoxs[i].checked->false  ckBoxs[i].checked==flase->ture ->ckBoxs[i].checked->false ->!ckBoxs[i].checked

                                if(!ckBoxs[j].checked){

                                    flag=false;

                                }

                            }

                            ckAll.checked = flag;

                        }

                       

                    }

                   

                   

            </script>