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"); 
    } 
    }) 
    })

    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()); 
    }); 


    示例

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title>checkbox操作</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>

     

  • 相关阅读:
    电脑分屏鼠标移不到另一个电脑上
    jquery datetimepicker 配置参数
    js获取前n天或者后n天的天数
    mysql查看变量
    Underscore _.template 方法使用详解
    sql优化
    echart图表demo
    jquery预加载的几种例子
    树莓派搭建服务器
    Thymeleaf标签学习
  • 原文地址:https://www.cnblogs.com/lqw4/p/4704742.html
Copyright © 2011-2022 走看看