zoukankan      html  css  js  c++  java
  • jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

      

    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、效果图

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

  • 相关阅读:
    Django【进阶】信号
    Django【进阶】缓存
    exec,eval
    linux下磁盘分区、格式化、挂载
    Django【进阶】中间件
    Django【进阶】权限管理
    Django【进阶】FBV 和 CBV
    MySQL 进阶(待发布)
    Django【进阶】
    django 分页和中间件
  • 原文地址:https://www.cnblogs.com/0201zcr/p/4704468.html
Copyright © 2011-2022 走看看