zoukankan      html  css  js  c++  java
  • js实现CheckBox全选或者不全选

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    </head>
    <body>

    <form id="form1" runat="server">
    <div>
    <input id="Checkbox1" name="all" type="checkbox" onclick="show()"/>全选/取消
    <input id="Checkbox2" name="c1" type="checkbox" />1
    <input id="Checkbox3" name="c1" type="checkbox" />2
    <input id="Checkbox4" name="c1" type="checkbox" />3
    <input id="Checkbox6" name="c1" type="checkbox" />4
    <input id="Checkbox5" name="c1" type="checkbox" />5
    </div>
    </form>
    </body>
    <script>
    function show()
    {
    //根据名字获取所有checkbox控件
    var allCheckBoxs = document.getElementsByName("c1");

    //半段点击了全选
    if (document.getElementById("Checkbox1").checked == true) {

    //循环让所有全选
    for (var i = 0; i < allCheckBoxs.length ; i++) {
    if (allCheckBoxs[i].type == "checkbox") {
    allCheckBoxs[i].checked = true;
    }
    }
    }
    //点击了取消全选
    else {
    //循环取消全选
    for (var i = 0; i < allCheckBoxs.length ; i++) {
    if (allCheckBoxs[i].type == "checkbox") {
    allCheckBoxs[i].checked = false;
    }
    }
    }
    }
    </script>
    </html>

  • 相关阅读:
    Lc112_路径总和
    多线程(4)
    Lc257_二叉树的所有路径
    Lc226_翻转二叉树
    Lc145_二叉树的后序遍历
    Lc144_二叉树的前序遍历
    Lc102_二叉树的层序遍历
    Lc101_对称二叉树
    Lc100_相同的树
    Lc94_二叉树的中序遍历
  • 原文地址:https://www.cnblogs.com/chaowang/p/6673335.html
Copyright © 2011-2022 走看看