使用JQuery实现checkbox的相关操作

Alien| 阅读:2429 发表时间:2018-04-18 16:52:17 JavaScript

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 a = ""; 
$("#btn5").click(function(){ 
    $("input[name='checkbox']:checkbox:checked").each(function(){ 
        a += $(this).val();
    }) 
    document.write(a); 
})

7、遍历选中项

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


本文标签: JavaScriptjquery单选反选全选
*本文由Alien发表并编辑,转载此文章请附上出处及本页链接。如有侵权,请联系本站删除。

热门推荐