您当前的位置： > HTML/JS/CSS >

js全选取消全选

发布时间：2018-12-30 12:10编辑：admin阅读（）

 
   /*一：需求分析：
            (1)点击全选：选中所有选择框（设置checked属性为true）
            (2)点击全不选：不选中所有选择框（设置checked属性为false）
            (3)点击反选：让每一个选择框的checked属性与自身相反
       二：思路分析
                1.获取元素
                2.注册事件
                3.事件处理
    */
 
    //1.获取页面元素
    var checkAll = document.getElementById('checkAll');//全选
    var unCheckAll = document.getElementById('unCheckAll');//全不选
    var reverseCheck = document.getElementById('reverseCheck');//反选
    var checkList = document.getElementsByClassName('check');//选择框列表
 
    //2.注册事件
 
    //2.1 全选
    checkAll.onclick = function(){
        //3.事件处理：选中所有选择框（设置checked属性为true）
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = true;
        }
    }
    //2.2 全不选
    unCheckAll.onclick = function(){
        //3.事件处理:不选中所有选择框（设置checked属性为false）
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = false;
        }
    }
    //2.3 反选
    reverseCheck.onclick = function(){
        //3.事件处理:让每一个选择框的checked属性与自身相反
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = !checkList[i].checked;//逻辑非取反
            // if (checkList[i].checked == true){
            //     checkList[i].checked = false;
            // }else{//false
            //     checkList[i].checked = true;
            // }
        }
    }
</script>




 
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
 
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">