JavaScript-事件【复选框—全选和反选】

最新推荐文章于 2023-08-18 18:19:47 发布

Ned_mahone

最新推荐文章于 2023-08-18 18:19:47 发布

阅读量344

点赞数

分类专栏： --Web_JavaScript Web --web_事件

本文链接：https://blog.csdn.net/Ned_mahone/article/details/75042947

版权

--Web_JavaScript 同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

Web

15 篇文章 0 订阅

订阅专栏

--web_事件

3 篇文章 0 订阅

订阅专栏

JavaScript - 事件 practice1

题目：

<script type="text/javascript">
    window.onload = function(){
        //全选[复选框]的全选实现
        var cBoxQ = document.getElementById("checkQ");
        //alert(cBoxQ);
        cBoxQ.addEventListener("change",function(){
            selectAll();
        },false);
        //反选[复选框]的反选实现
        var cBoxF = document.getElementById("checkF");
        cBoxF.addEventListener("change",function(){
            selectBack();
        },false);
        var cboxs = document.getElementsByName("box");
        for(var i=0;i<cboxs.length;i++){
            cboxs[i].addEventListener("change",function(){
                isSelestAll();
            },false);
        }
    //全选的函数
    function selectAll(){
        var boxs = document.getElementsByName("box");
        var cBoxQ = document.getElementById("checkQ");
        var isSelect = cBoxQ.checked;
        //teacher
        for(var i=0;i<boxs.length-1;i++){
            if(isSelect){
                boxs[i].checked = true;
            }else{
                boxs[i].checked = false;
            }
        }
    }
    //反选的函数
    function selectBack(){
        var boxs = document.getElementsByName("box");
        var cBoxF = document.getElementById("checkF");
        var isSelectF = cBoxF.checked;
        if(isSelectF){
            for(var i=1;i<boxs.length-1;i++){
                if(boxs[i].checked){
                    boxs[i].checked = false;
                }else{
                    boxs[i].checked = true;
                }
            }
        }else{
            for(var i=1;i<boxs.length-1;i++){
                if(!boxs[i].checked){
                    boxs[i].checked = true;
                }else{
                    boxs[i].checked = false;
                }
            }
        }
    }
    //判断全选复选框是否为yes
    function isSelestAll(){
        var boxs = document.getElementsByName("box");
        /*//测试
         //alert(boxs[1].checked);
         alert(document.getElementById("checkF").checked);*/
        var isTrue;
        for(var i=1;i<boxs.length-1;i++){
            if(boxs[i].checked){
                isTrue = true;
            }else{
                isTrue = false;
                break;
            }
        }
        if(isTrue){
            boxs[0].checked = true;
        }else{
            boxs[0].checked = false;
        }
    }
    }
</script>

<body>
<table id="newTab" border="1px" style="text-align: left">
    <tr style="background-color: yellow">
        <td><input type="checkbox" id="checkQ" name="box" />全选</td>
        <td style="text-align: center">复选框全选示例</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check1" name="box" />1</td>
        <td>所用：</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check2" name="box" />2</td>
        <td>a:单机猎头复选框全选或全不选</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check3" name="box" />3</td>
        <td>b:只要一个没有选中，则取消猎头的选中状态</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check4" name="box" />4</td>
        <td>c:当所有选中时,猎头复选框自动置为选中状态</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check5" name="box" />5</td>
        <td>d:将复选框反过来选</td>
        <td></td>
        <td></td>
    </tr>
    <tr style="background-color: powderblue">
        <td><input type="checkbox" id="checkF" name="box" />反选</td>
        <td style="text-align: center">反选示例</td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>

Ned_mahone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-事件【复选框—全选和反选】

JavaScript - 事件 practice1题目：script type="text/javascript"> window.onload = function(){ //全选[复选框]的全选实现 var cBoxQ = document.getElementById("checkQ"); //alert(c
复制链接

扫一扫