每天一个效果 ：（5）全选，全不选，反选

今天来写一个全选，全不选，反选的一个效果，还是先把html文件给大家（小声说，我之前好像发过）

    <form action="">
        <p><input type="checkbox" name="" id="" >尼古拉斯·赵四</p>
        <p><input type="checkbox" name="" id="">莱昂纳德·刘能</p>
        <p><input type="checkbox" name="" id="">约翰尼·宋小宝</p>
        <p><input type="checkbox" name="" id="" >布拉德·小沈阳</p>
    </form>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>

二话不说，看效果

 直接分享一下思路，先选button按钮，和input。选出来之后，我们拿第一个按钮（全选）举例，添加一个点击事件，给事件里面一个循环，循环每一个input，将每一个input的checked都给true。当然，全不选按钮，也是一样，全都给false就行了，看效果，和代码

        let but = document.getElementsByTagName('button');
        let input = document.getElementsByTagName('input');
        //全选
        but[0].onclick = function(){
            for(let i = 0;i<input.length;i++){
             input[i].checked = true;
            }
        }
        //全不选
        but[1].onclick = function(){
            for(let i = 0;i<input.length;i++){
             input[i].checked = false;
            }
        }

 

剩下的就是反选了，反选，我们只需要加一个 取反（!）就行了，继续看效果和代码

        but[2].onclick = function(){
            for(let i = 0;i<input.length;i++){
             input[i].checked = !input[i].checked;
            }

最后也把总码给大家~ 

 

    <form action="">
        <p><input type="checkbox" name="" id="" >尼古拉斯·赵四</p>
        <p><input type="checkbox" name="" id="">莱昂纳德·刘能</p>
        <p><input type="checkbox" name="" id="">约翰尼·宋小宝</p>
        <p><input type="checkbox" name="" id="" >布拉德·小沈阳</p>
    </form>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>
    <script>
        //选中三个形式：1.用户勾选    2.在标签上添加checked属性   3.js中，checked = true
        let but = document.getElementsByTagName('button');
        let input = document.getElementsByTagName('input');
        //全选
        but[0].onclick = function(){
            for(let i = 0;i<input.length;i++){
             input[i].checked = true;
            }
        }
        //全不选
        but[1].onclick = function(){
            for(let i = 0;i<input.length;i++){
             input[i].checked = false;
            }
        }
        //反选
        but[2].onclick = function(){
            for(let i = 0;i<input.length;i++){
             input[i].checked = !input[i].checked;
            }
        }

    </script>