html table之全选，全不选

最新推荐文章于 2024-08-10 12:19:42 发布

dongbi1970

最新推荐文章于 2024-08-10 12:19:42 发布

阅读量553

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/DoubleEggs/p/5747142.html

版权

就是这个小功能让我和组长引发争端，就是这个小功能让我差点“被”辞职，就是这个自封装的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" οnchange="DX()"></td>
        <td><input type="button" value="ceshi" οnclick="Test()" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" id="cb0" value="12" οnchange="GB(this.id)"></td>
        <td>liweizhong</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" id="cb1" value="34" οnchange="GB(this.id)"></td>
        <td>liweizhong</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" id="cb2" value="56" οnchange="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>

这个才能更加适合我们的需要！

技术不重要，也不高深，但是想法，思路很重要！

转载于:https://www.cnblogs.com/DoubleEggs/p/5747142.html