[JS教程] input checkbox 用js实现全选/不选

一、实例HTML结构

---

<form>
    <div><input name="selectall" value="全选" type="checkbox" id="selectall" /> <label for="selectall">全选/不选</label></div>
    <p><input name="checkbox" value="Item1" type="checkbox" /> 1</p>
    <p><input name="checkbox" value="Item2" type="checkbox" /> 2</p>
    <p><input name="checkbox" value="Item3" type="checkbox" /> 3</p>
</form>

二、JS代码

---

<script>    
    //选择所有name相同的单选按钮
    var targets=document.getElementsByName("checkbox");
    //计算单选按钮的个数
    var targetsLen=targets.length;
    //设置全选按钮的状态为全未选
    var status=0;
    //绑定全选按钮的点击事件
    document.getElementById("selectall").onclick=function(){
        //如果当前是全未选状态的话
        if (status==0){
            //把每个单选按钮变成已选
            for (var i=0; i<targetsLen; i++){
                targets[i].checked=true;
            }
            //设置全选按钮的状态为已选
            status=1;
        }
        //如果当前是全选状态的话
        else {
            //把每个单选按钮变成未选
            for (var i=0; i<targetsLen; i++){
                targets[i].checked=false;
            }
            //设置全选按钮的状态为未选
            status=0;
        }
    }
</script>