zoukankan      html  css  js  c++  java
  • html table之 全选,全不选

            就是这个小功能让我和组长引发争端,就是这个小功能让我差点“被”辞职,就是这个自封装的js方法让我放下了对组长的敬畏之心,现在分享一下,其实也很简单,但是真的有这么简单吗?

    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>check test</title>  
    </head>  
    <body>  
      <form name="formGroup" id="formGroup" action="#" method="post" target="_self">  
        <table border="1" cellpadding="2" cellspacing="1" class="table_hide">  
          <tr class="table_title">  
            <td width="50" align="center" class="text_center">序号</td>  
            <td width="40" align="center" class="text_center">选择</td>  
            <td width="100" align="center"></td>  
            <td width="100" align="center"></td>  
          </tr>  
          <tr>  
            <td align="center" class="text_center">1</td>  
            <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>  
            <td align="center"></td>  
            <td align="center"></td>  
          </tr>  
          <tr>  
            <td align="center" class="text_center">2</td>  
            <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>  
            <td align="center"></td>  
            <td align="center"></td>  
          </tr>  
          <tr>  
            <td align="center" class="text_center">3</td>  
            <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>  
            <td align="center"></td>  
            <td align="center"></td>  
          </tr>  
          <tr>  
            <td align="center">全选</td>  
            <!-- 复选框单击方式 -->  
            <td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>  
            <!-- 按钮方式,本质无区别 -->  
            <td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="选/反选"></td>  
            <td align="center"></td>  
          </tr>  
        </table>  
      </form>  
    </body>  
    <script type="text/javascript">  
      // 选择或者反选 checkbox  
      function CheckSelect(thisform)  
      {  
        // 遍历 form  
        for ( var i = 0; i < thisform.elements.length; i++)  
        {  
          // 提取控件  
          var checkbox = thisform.elements[i];  
          // 检查是否是指定的控件  
          if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)  
          {  
            // 正选  
            checkbox.checked = true;  
          }  
          else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)  
          {  
            // 反选  
            checkbox.checked = false;  
          }  
        }  
      }  
    </script>  
    </html>  
    这种,应用的是表单控件遍历,很简单,但是,不合适我们的应用。


    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    <table>
        <tr>
            <td><input type="checkbox" id="ca" onchange="DX()"></td>
            <td><input type="button" value="ceshi" onclick="Test()" /></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" id="cb0" value="12" onchange="GB(this.id)"></td>
            <td>liweizhong</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" id="cb1" value="34" onchange="GB(this.id)"></td>
            <td>liweizhong</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" id="cb2" value="56" onchange="GB(this.id)"></td>
            <td>liweizhong</td>
        </tr>
    </table>
    
    
    <script type="text/javascript">
        function DX() {//全选,全不选
            var b = document.getElementById("ca").checked;
            var c = document.getElementsByName("cb");
            var ad=c.length;
            if (b == true) {
                for (var i = 0; i < ad; i++) {
                    var id = "cb" + i;
                    document.getElementById(id).checked = true;
                    var result = document.getElementById(id).checked;
                }
    
            } else {
                for (var i = 0; i < ad; i++) {
                    var id = "cb" + i;
                    document.getElementById(id).checked = false;
                    var result = document.getElementById(id).checked;
                }
            }
        }
    
        function GB(id) {//更改状态
            var result = document.getElementById(id).checked;
            document.getElementById("ca").checked = true;
            if (result == true) {
                var c = document.getElementsByName("cb");
                var ad = c.length;
                for (var i = 0; i < ad; i++) {
                    var idre = "cb" + i;
                    var result1 = document.getElementById(idre).checked;
                    if (document.getElementById(idre).checked == false) {
                        document.getElementById("ca").checked =false;
                        return;
                    }
                }
            } else {
                alert(document.getElementById(id).checked);
                document.getElementById("ca").checked = false;
                return;
            }
        }
    
        function Test() {//获取value值
            var result = document.getElementsByName("cb");
            var int = result.length;
            var arr = "";
            for (var i = 0; i < int; i++)
            {
                var id="cb"+i;
                if (document.getElementById(id)) {
                    arr += "'"+document.getElementById(id).value+"'"+",";
                }
            }
            alert(arr);
        }
    </script>
    这个才能更加适合我们的需要!

    技术不重要,也不高深,但是想法,思路很重要!


  • 相关阅读:
    systemctl
    防火墙firewalld
    k8s 基础概念
    进程
    模板问题
    自动发现
    oracle操作
    aix 10代oracle zabbix2.4.4 日志监控
    paramiko
    test
  • 原文地址:https://www.cnblogs.com/DoubleEggs/p/5747142.html
Copyright © 2011-2022 走看看