• jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox


    原文:http://www.cnblogs.com/0201zcr/p/4704468.html

    $(".all_chk").on("click",function(){
    //全选/全不选
    var isChecked = $(this).prop("checked");
    $("input[type='checkbox']").prop("checked", isChecked);
    })

    1、全选

    $("#btn1").click(function(){ 
    $("input[name='checkbox']").attr("checked","true"); 
    }) 

    2、取消全选(全不选)

    $("#btn2").click(function(){ 
    $("input[name='checkbox']").removeAttr("checked"); 
    }) 

    3、选中所有奇数

    $("#btn3").click(function(){ 
    $("input[name='checkbox']:odd").attr("checked","true"); 
    }) 

    4、选中所有偶数

    $("#btn6").click(function(){ 
    $("input[name='checkbox']:even").attr("checked","true"); 
    }) 

    5、反选

    复制代码
    $("#btn4").click(function(){ 
    $("input[name='checkbox']").each(function(){ 
    if($(this).attr("checked")) 
    { 
    $(this).removeAttr("checked"); 
    } 
    else 
    { 
    $(this).attr("checked","true"); 
    } 
    }) 
    }) 
    复制代码

    或者

    $("#invert").click(function(){
            $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
                $(o).attr("checked",!$(o).attr("checked"));
            });
        });

    6、获取选择项的值

    复制代码
    var aa=""; 
    $("#btn5").click(function(){ 
    $("input[name='checkbox']:checkbox:checked").each(function(){ 
    aa+=$(this).val() 
    }) 
    document.write(aa); 
    }) 
    }) 
    复制代码

    7、遍历选中项

    $("input[type=checkbox]:checked").each(function(){
     //由于复选框一般选中的是多个,所以可以循环输出 
     alert($(this).val()); 
    }); 

    8、例子

    复制代码
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title>无标题页</title> 
    <script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    jQuery(function($){ 
    //全选 
    $("#btn1").click(function(){ 
    $("input[name='checkbox']").attr("checked","true"); 
    }) 
    //取消全选 
    $("#btn2").click(function(){ 
    $("input[name='checkbox']").removeAttr("checked"); 
    }) 
    //选中所有基数 
    $("#btn3").click(function(){ 
    $("input[name='checkbox']:even").attr("checked","true"); 
    }) 
    //选中所有偶数 
    $("#btn6").click(function(){ 
    $("input[name='checkbox']:odd").attr("checked","true"); 
    }) 
    //反选 
    $("#btn4").click(function(){ 
    $("input[name='checkbox']").each(function(){ 
    if($(this).attr("checked")) 
    { 
    $(this).removeAttr("checked"); 
    } 
    else 
    { 
    $(this).attr("checked","true"); 
    } 
    }) 
    }) 
    //或许选择项的值 
    var aa=""; 
    $("#btn5").click(function(){ 
    $("input[name='checkbox']:checkbox:checked").each(function(){ 
    aa+=$(this).val() 
    }) 
    document.write(aa); 
    }) 
    }) 
    </script> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <div> 
    <input type="button" id="btn1" value="全选"> 
    <input type="button" id="btn2" value="取消全选"> 
    <input type="button" id="btn3" value="选中所有奇数"> 
    <input type="button" id="btn6" value="选中所有偶数"> 
    <input type="button" id="btn4" value="反选"> 
    <input type="button" id="btn5" value="获得选中的所有值"> 
    <br> 
    <input type="checkbox" name="checkbox" value="checkbox1"> 
    checkbox1 
    <input type="checkbox" name="checkbox" value="checkbox2"> 
    checkbox2 
    <input type="checkbox" name="checkbox" value="checkbox3"> 
    checkbox3 
    <input type="checkbox" name="checkbox" value="checkbox4"> 
    checkbox4 
    <input type="checkbox" name="checkbox" value="checkbox5"> 
    checkbox5 
    <input type="checkbox" name="checkbox" value="checkbox6"> 
    checkbox6 
    <input type="checkbox" name="checkbox" value="checkbox7"> 
    checkbox7 
    <input type="checkbox" name="checkbox" value="checkbox8"> 
    checkbox8 
    </div> 
    </form> 
    </body> 
    </html> 
    复制代码

    9、效果图

       致谢:感谢您的耐心阅读!

  • 相关阅读:
    jQuery serialize()方法无法获取表单数据
    gorm 零值不更新问题
    SpringCloud Nacos使用和配置,SpringCloud Nacos 服务注册中心配置使用
    Nacos longPolling error,Nacos1.4.1服务配置文件更新一次后报错
    Windows Mysql5.7安装和配置,Windows 安装多个Mysql
    SpringCloud Gateway使用和配置,SpringCloud Gateway predicates详细配置
    Windows RabbitMQ_3.8 安装和配置,Windows erlang下载
    SpringCloud Hystrix dashboard2.2.7使用和配置,SpringCloud Hystrix dashboard服务监控
    SpringCloud Hystrix使用和配置,SpringCloud Hystrix服务熔断降级
    SpringCloud OpenFeign使用和配置,Java OpenFeign 使用教程
  • 原文地址:https://www.cnblogs.com/beipiaoxiaohuo/p/6728293.html
Copyright © 2020-2023  润新知