• jquery实现全选、不选、反选的两种方法


    转:https://www.cnblogs.com/annie211/p/5843364.html

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false"。经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。

     

    方法一:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>全选、不选、反选 1</title>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
    $('.check .btn1').click(function(){//全选
    $('.music :checkbox').prop('checked',true);
    });

    $('.check .btn2').click(function(){//全不选
    $('.music :checkbox').prop('checked',false);
    });

    $('.check .btn3').click(function(){//反选
    $('.music :checkbox').each(function(){
    $(this).prop('checked',!$(this).prop('checked'));
    });
    });
    });
    </script>
    </head>
    <body>
    <div class="music">
    <input type="checkbox" name="music1" value="小白兔">小白兔<br>
    <input type="checkbox" name="music2" value="小燕子">小燕子<br>
    <input type="checkbox" name="music3" value="哈巴狗">哈巴狗<br>
    <input type="checkbox" name="music4" value="小青蛙">小青蛙<br>
    <input type="checkbox" name="music5" value="数鸭子">数鸭子<br><br>
    </div>
    <div class="check">
    <button class="btn1">全选</button>
    <button class="btn2">全不选</button>
    <button class="btn3">反选</button>
    </div>
    </body>
    </html>

    方法二:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>全部由jquery动态生成</title>
    <script src="jquery.min.js"></script>
    <script>

    function checkAll(){   //全选
    $(":checkbox").prop("checked",true );
    }
    function checkNo(){  //不选
    $(":checkbox").prop("checked",false);
    }
    function checkRev(){  //反选
    $.each($(":checkbox"),function(){
    $(this).prop("checked",!$(this).prop("checked"));
    });
    }

    $(function(){
    var sec=$("<div></div>").appendTo($("body"));//创建一个div追加到body里面
    var input="";//创建一个空的变量
    for(var i=0;i<5;i++){
    var index=i+1;
    input+="<input type='checkbox' name='标题"+index+ "'value='标题"+index+"'>"+"标题"+index+"<br>";
    }//把从0到4每一个创建的input收集到空变量里面
    sec.append(input);//再把这些收集到的所有input追加到div里面

    sec.append("<button onclick='checkAll()'>全选</button>");//创建全选按钮,并追加到div里面
    sec.append("<button onclick='checkNo()'>全不选</button>");//创建全不选按钮,并追加到div里面
    sec.append("<button onclick='checkRev()'>反选</button>");//创建反选按钮,并追加到div里面
    });

    </script>
    </head>
    <body>
    </body>
    </html>

  • 相关阅读:
    Oracle数据库配置
    匹配汉字与全角半角括号
    Linux任务调度crontab时间规则介绍
    配置文件方面的总结
    openlayers 4快速渲染管网模型数据
    openlayers 各种图层,持续更新
    简单的js定时器
    mysql client does not support authentication
    java 记录
    创建maven工程
  • 原文地址:https://www.cnblogs.com/guoyunlong666/p/9480224.html
Copyright © 2020-2023  润新知