一键实现全选和全不选

html代码

<div id="box">
    <p><input type="checkbox">1</p>
    <p><input type="checkbox">2</p>
    <p><input type="checkbox">3</p>
    <p><input type="checkbox">4</p>
    <p><input type="checkbox">5</p>
    <p><input type="checkbox">6</p>
</div>

js代码

 var inputs = document.getElementById("box").getElementsByTagName("input");

    var btn = document.getElementById("btn");
    //信号量

    var state = 0;
    btn.onclick = function () {
        //信号量如果是0 ，则变为1 ，如果是 1，则变为 0
        state = state == 0 ? 1: 0;

        //根据信号量的值，来 改变checked 的值 如果是0 ，就变成”“
        var str = state == 0 ? "": "checked";
        //改变按钮的value值
        this.value = state == 0 ? "全选" : "全不选";

        for(var i = 0 ; i < inputs.length ; i++){
            inputs[i].checked = str;
        }
    }

实现效果