简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    js实现全选和全不选功能

    内容摘要:!DOCTYPE htmlhtml lang='en'head meta charset='UTF-8' title操作复选框/title/headbodyinput type='checkbox' id='quan' 全选brinput type='checkbox' name='aihao'游戏brinput type='checkbox' name='......

      <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>操作复选框</title>

    </head>

    <body>


    <input type="checkbox" id="quan"> 全选<br>

    <input type="checkbox" name="aihao">游戏<br>

    <input type="checkbox" name="aihao">睡觉<br>

    </body>

    </html>

    <script type="text/javascript">


    window.onload=function () {


    var firstChecbox = document.getElementById("quan");

    var aihao=document.getElementsByName("aihao");

    //完成全选和全不选

    //当单击全选时使下方的checkbox中的checked属性为true

    firstChecbox.onclick=function () {

    //遍历下方的checkbox

    //使每一个复选框的属性中的checked和全选的属性保持一致即可实现(不完善)

    for (let i = 0; i <aihao.length ; i++) {

    aihao[i].checked=firstChecbox.checked;

    }

    }

    //如果选中的数量和爱好的总数量一致的就把全选给选中,否则不全选

    //为每一个aihao绑定单击事件

    var all=aihao.length;

    for (let i = 0; i < aihao.length; i++) {

    //绑定单击事件

    aihao[i].onclick=function () {

    //定义选中的数量

    var checkedCount=0;

    for (let i = 0; i < aihao.length; i++) {

    //如果爱好选中就把选中的数量+1;

    if (aihao[i].checked){

    checkedCount++;

    }

    //如果选中的数量和总数相当就把全选给勾选

    if (checkedCount==all){

    firstChecbox.checked=true

    }

    else{

    firstChecbox.checked=false;

    }

    }

    }


    }

    }


    </script>

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/7/28 发布时间:16:38:36 点击:171 
  • 上一篇:在新版chrome中顶部日期部分显示undefine
  • 下一篇:没有了
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.33 Build 20.7.30(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020