js复选框

来源：互联网发布：轻量 linux 桌面编辑：程序博客网时间：2024/04/25 23:48
<!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <script>          //全选          function checkAll() {              var code_Values = document.all['Item'];              if (code_Values.length) {                  for (var i = 0; i < code_Values.length; i++) {                      code_Values[i].checked = true;                  }              } else {                  code_Values.checked = true;              }          }            //全选          function CheckAll1(e, itemname) {              var aa = document.getElementsByName(itemname);              if (aa == undefined) return;              for (var i = 0; i < aa.length; i++) aa[i].checked = e.checked;          }            //全选、反选          function CheckAllAndReverse(value, obj) {              var form = document.getElementsByTagName("form")              for (var i = 0; i < form.length; i++) {                  for (var j = 0; j < form[i].elements.length; j++) {                      if (form[i].elements[j].type == "checkbox") {                          var e = form[i].elements[j];                          if (value == "selectAll") {                              e.checked = obj.checked                          }                          else {                              e.checked = !e.checked;                          }                      }                  }              }          }            //反选          function uncheckAll() {              var code_Values = document.all['Item'];              if (code_Values.length) {                  for (var i = 0; i < code_Values.length; i++) {                      code_Values[i].checked = false;                  }              } else {                  code_Values.checked = false;              }          }      </script>  </head>  <body>      <form>          <table border="1">              <tr>                  <td>方式1</td>                  <td>                      <input id="chkOk" type="checkbox" name="chall" value="on" onclick="CheckAllAndReverse('selectAll', this)" />全选                  </td>                  <td>                      <input id="chkNo" type="checkbox" name="invest" value="checkbox" onclick="CheckAllAndReverse()" />反选                  </td>              </tr>              <tr>                  <td>方式2</td>                  <td>                      <input id="btnOk" type="button" value="全选" onclick="checkAll()" /></td>                  <td>                      <input id="btnNo" type="button" value="反选" onclick="CheckAllAndReverse()" /></td>              </tr>              <tr>                  <td>方式3</td>                  <td>                      <input name="chkall" value="1" type="checkbox" onclick="CheckAll1(this, 'Item')" />全选</td>                  <td>                      </td>              </tr>              <tr>                  <td>方式4</td>                  <td>                      <input name="chkall" value="1" type="checkbox" onclick="uncheckAll()" />取消全选</td>                  <td>                      <input id="Button2" type="button" value="取消全选" onclick="uncheckAll()" />                  </td>              </tr>          </table>          <br />          <br />          <br />          <br />          <input type="checkbox" name="Item" />1      <input type="checkbox" name="Item" />2      <input type="checkbox" name="Item" />3      <input type="checkbox" name="Item" />4      <input type="checkbox" name="Item" />5      <input type="checkbox" name="Item" />6      <input type="checkbox" name="Item" />7      <input type="checkbox" name="Item" />8      </form>  </body>  </html>
0 0