jQuery操作复选框checkbox技巧总结



jQuery操作复选框checkbox技巧总结 — 设置选中、取消选中、获取被选中的值、判断是否选中等

checked属性定义

先了解下input标签的checked属性:

1、HTML checked 属性

◆ 定义和用法

checked 属性是一个布尔属性

checked 属性规定在页面加载时应该被预先选定的 元素。

checked 属性适用于

checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

checked属性的用法

注意:操作checked、disabled、selected属性,强制建议只用prop()方法!!,不要用attr()方法。如需移除属性,请使用 removeProp() 方法。

1、jQuery判断checked是否是选中状态的三种方法:

1
2
3
4
5
.attr('checked') // 返回:"checked"或"undefined" ;

.prop('checked') // 返回true/false

.is(':checked') // 返回true/false //别忘记冒号哦

2、jQuery赋值checked的几种写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$("#cb1").attr("checked","checked"); //通用做法,现在不推荐了

$("#cb1").attr("checked",true); //不标准,不推荐了

$("#cb1").attr("checked","true"); //不标准,不推荐了
------------------------------------------
jQuery的prop()的4种赋值(推荐如下写法):

$("#cb1").prop("checked",true); //标准写法,推荐!

$("#cb1").prop({checked:true}); //map键值对    

$("#cb1").prop("checked",function(){
    return true;//函数返回true或false
});

转载于CSDN博主-有范管理美学

标签中checked=”checked”已有,但却不显示打勾的解决办法

1
2
3
4
5
6
7
8
9
10
11
12
13
function check(id,check{        

    if (check) {                

        $("." + id).find("input[type='checkbox']").prop("checked"true);        

    } else {                

        $("." + id).find("input[type='checkbox']").prop("checked"false);        

    }

}

jQuery操作checkbox技巧总结

1、获取单个checkbox选中项的值(三种写法)

1
2
3
4
5
6
7
8
9
$("#chx1").find("input:checkbox:checked").val()

//或者

$("#chx1").find("input:[type='checkbox']:checked").val();

//或者

$("#chx1").find("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#chk1").find('input:checkbox').each(function({ //遍历所有复选框

    if ($(this).prop('checked') == true) {

        console.log($(this).val()); //打印当前选中的复选框的值

    }

});

function getCheckBoxVal()//jquery获取所有选中的复选框的值 

    var chk_value =[]; 

    $("#chk1").find('input[name="test"]:checked').each(function()//遍历,将所有选中的值放到数组中

        chk_value.push($(this).val()); 

    }); 

    alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 

}

3、 设置第一个checkbox 为选中值

1
2
3
4
5
$("#chk1").find('input:checkbox:first').prop("checked",true);

//或者

$("#chk1").find('input:checkbox').eq(0).prop("checked",true);

4、设置最后一个checkbox为选中值

1
$("#chk1").find('input:checkbox:last').prop("checked",true);

5、根据索引值设置任意一个checkbox为选中值

1
2
3
4
5
6
7
//从索引0开始(包含),到索引2(不包含)的checkbox

$("#chk1").find('input:checkbox').eq(索引值).prop('checked'true);  
//索引值=0,1,2.... 
//或者
$("#chk1").find('input:checkbox').slice(1,2).prop('checked'true);
//同时选中第0个和第1个checkbox

6、根据value值设置checkbox为选中值

1
2
3
$("#chk1").find("input:checkbox[value='1']").prop('checked',true);

$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);

7、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox

1
2
3
4
5
6
7
8
$("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除,将标签从页面上删除了


$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....

//如删除第3个checkbox:

$("#chk1").find("input:checkbox").eq(2).remove();

8、全部选中或全部取消选中

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#chk1").find('input:checkbox').each(function({

    $(this).prop('checked'true);

});

//或者

$("#chk1").find('input:checkbox').each(function ({

    $(this).prop('checked',false);

});

9、选中所有奇数项或偶数项

1
2
3
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //选中所有偶数 

$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //选中所有奇数

10、反选

方法一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#btn4").click(function()

    $("input[type='checkbox']").each(function()//反选 

         if($(this).prop("checked")){ 

             $(this).prop("checked",false); 

          } else

             $(this).prop("checked",true); 

         } 

    });    

});

方法二:

1
2
3
4
5
6
7
8
9
10
11
$("#btn4").on('click',function()

//反选所有的复选框(没选中的改为选中,选中的改为取消选中)

    $("#chk1").find("input[type='checkbox']").prop("checked"function(index, oldValue){

        return !oldValue;

    });

}
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信