• JavaScript---复选框反选全选


    Script

    <script type="text/javascript">
      /*直接使用document.getElementsByName("c1")获取元素,则获取所有name=c1的元素,放在函数调用之前便可以了*/
      var allpro = tableAll.getElementsByName("c1");
      //全选方法
      function change() {
         /*注意:这里获取指定节点与获取指定节点中checkbox按钮组只能放在body内容加载完成之后才执行的位置;直接使用document.getElementsByName("c1")获取元素*/
         //获取指定节点
            var tableAll = document.getElementById("tableName");
            //获取指定节点中checkbox按钮组
            var allpro = tableAll.getElementsByTagName("input");
            //获取全选按钮
            var all = document.getElementById("all");
            //全选按钮被选中时,遍历所有按钮
            if (all.checked) {
                for (var i = 0; i < allpro.length; i++) {
                    if (allpro[i].type=="checkbox") {
                        allpro[i].checked=true;
                    }
                }
            }else{//全选按钮未被选中时
                for (var i = 0; i < allpro.length; i++) {
                    if (allpro[i].type=="checkbox") {
                        allpro[i].checked=false;
                    }
                }
            }
        }
       //反选
    function revs() {   var tableAll = document.getElementById("tableName");   //获取checkbox按钮组   var allpro = tableAll.getElementsByTagName("input");   //遍历所有按钮   for (var i = 0; i < allpro.length; i++) {   if (allpro[i].type=="checkbox") {   allpro[i].checked= !allpro[i].checked;   }   }   } </script>

    html

    <input type="checkbox" name="c0" id="all" value="全选" onclick="change()">
    全选
    <input type="checkbox" name="r0" id="revcheck" value="反选" onclick="revs()">
    反选
    <hr>
    <table id="tableName">
        <tr>
            <td><input type="checkbox" name="c1">篮球</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c1">足球</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c1">羽毛球</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c1">兵乓球</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <td><input type="checkbox" name="c1">篮球</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c1">足球</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c1">羽毛球</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="c1">兵乓球</td>
        </tr>
    </table>
  • 相关阅读:
    串匹配(C/C++实现)
    稀疏数组-矩阵存储【C语言实现】
    mysql frm、MYD、MYI数据文件恢复,导入MySQL中
    我们为什么要分库分表?
    golang 使用goto进行多错误处理
    mongodb 查看、创建、修改、删除索引
    MyBatis中模糊搜索使用like匹配带%字符时失效问题
    MySQL 用 limit 为什么会影响性能?
    【java框架】SpringBoot(10) -- SpringBoot巧用 @Async提升API接口并发能力
    【Java代码之美】 -- Java17新特性初探
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8460127.html
Copyright © 2020-2023  润新知