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

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

  • 相关阅读:
    对Asp.Net MVC架构的用后感想
    [推荐]MSDN WebCast课程下载工具
    Web系统中关于Postback与页面离开的分辨
    父爱
    Silverlight+RIA Service Required验证失效问题的解决方案
    心情
    IIS32位,64位模式下切换
    每天都要保持编码的习惯
    2008年至今较难忘的一天
    使用SVN+C#.NET保持多台机器的文件同步
  • 原文地址:https://www.cnblogs.com/zhaoyingjie/p/6196468.html
Copyright © 2020-2023  润新知