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>

  • 相关阅读:
    获取全部校园新闻
    爬取校园新闻首页的新闻
    网络爬虫基础练习
    团队总结
    团队第二阶段冲刺绩效评估
    第二阶段冲刺第七天站立会议
    第二阶段冲刺第六天站立会议
    第二阶段冲刺第五天站立会议
    内测版本
    第二阶段冲刺第四天站立会议
  • 原文地址:https://www.cnblogs.com/chaowang/p/6673335.html
Copyright © 2011-2022 走看看