A-A+

总结jQuery checkbox全选/反选代码

2016年01月07日 web前端设计 暂无评论 阅读 5 views 次

用到最多的就是多列表数据管理操作了,我们通常会需要checkbox全选与反选功能了,下文就为各位整理一下jquery对checkbox全选反选的例子整理。

在修改Hi GPA的时候需要增加一个全选用户的功能,结果被坑惨了。

首先,最终代码是这么写的:

  1. var text = $('#select-all-student').html();  
  2. if (text == '全选') {  
  3.     $('input[name="studentNumber"]').prop('checked', true);  
  4.     $('#select-all-student').html('取消全选')  
  5. else {  
  6.     $('input[name="studentNumber"]').prop('checked', false);  
  7.     $('#select-all-student').html('全选');  
  8. }  

这里集成了一个全选和反选的功能,可以选中所有name为studentNumber的checkbox。

当然,最初我不是这么写的,而是使用了attr()结果最终导致了只能进行一次的全选反选,当时简直感觉醉醉哒。

折腾了一个小时之后感觉这压根就不是个事,为啥别人写的东西就可以,无奈,查了一下:

jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,即如下代码:

  1. $("input[type='checkbox']").prop("checked");   
  2. $("input[type='checkbox']").prop("disabled"false);   
  3. $("input[type='checkbox']").prop("checked"true);  

应该使用.prop()来替代.attr()来设置disabled和checked。.val()用于获取或者设置其value值。

标签:

给我留言