jquery操作复选框全选反选选中 1.9与1.8区别
2014-03-12 14:48
429 查看
前段时间在用jQuery1.9版本中操作复选框总是出现选不中的情况,经过查询资料总结如下:
在jquery 1.8.及以下的版本,我们对于checkbox的选中与不选中操作如下:(一般用属性attr()操作)
在jQuery1.9以上用attr()在第一次可以选中以及全不选,第二次操作就会不出现效果应该将attr()改成prop()
那么,什么时候使用attr,什么时候使用prop??
1.添加属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用prop.
3.其他则使用attr
项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
在jquery 1.8.及以下的版本,我们对于checkbox的选中与不选中操作如下:(一般用属性attr()操作)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!--<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>--> <script src="js/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //全选 $("#CheckedAll").click(function () { $('[name=items]:checkbox').attr('checked', true); }); //全不选 $("#CheckedNo").click(function () { $('[name=items]:checkbox').attr('checked', false); }); //反选 $("#CheckdRev").click(function () { $('[name=items]:checkbox').each(function () { //此处用Jquery写法 //$(this).attr("checked", !$(this).attr("checked")); //直接使用JS原生代码,简单实用 this.checked = !this.checked; }); }); $("#CheckedAllNO").click(function () { $("[name=items]:checkbox").attr("checked", this.checked); }); //提交 $("#send").click(function () { var str = "你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function () { str += $(this).val() + "\r\n"; }) alert(str); }); }); </script> </head> <body> <form method="post" action=""> 你爱好的运动是? <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球<br /> <br /> <input type="checkbox" id="CheckedAllNO" />全选/全不选<br /> <input type="button" id="CheckedAll" value="全 选" /> <input type="button" id="CheckedNo" value="全不选" /> <input type="button" id="CheckdRev" value="反 选" /> <input type="button" id="send" value="提 交" /> </form> </body> </html>
在jQuery1.9以上用attr()在第一次可以选中以及全不选,第二次操作就会不出现效果应该将attr()改成prop()
<head> <title></title> <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script> <!--<script src="js/jquery-1.3.1.js" type="text/javascript"></script>--> <script type="text/javascript"> $(function () { //全选 $("#CheckedAll").click(function () { $('[name=items]:checkbox').prop('checked', true); }); //全不选 $("#CheckedNo").click(function () { $('[type=checkbox]:checkbox').prop('checked', false); }); //反选 $("#CheckdRev").click(function () { $('[name=items]:checkbox').each(function () { //此处用JQ写法。 //$(this).attr("checked", !$(this).attr("checked")); //直接使用JS原生代码,简单实用 this.checked = !this.checked; }); }); $("#CheckedAllNO").click(function () { $("[name=items]:checkbox").prop("checked", this.checked); }); //提交 $("#send").click(function () { var str = "你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function () { str += $(this).val() + "\r\n"; }) alert(str); }); }); </script> </head>
那么,什么时候使用attr,什么时候使用prop??
1.添加属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用prop.
3.其他则使用attr
项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
Attribute/Property | .attr() | .prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width()) |
相关文章推荐
- jquery操作复选框全选反选选中 1.9与1.8区别
- jquery中选中复选框1.8之前与1.8之后的区别
- jQuery——选中、不选中、全选、取消全选等复选框操作
- Jquery 操作复选框 全选,判断是否选中等
- 用jquery实现复选框全选按钮的操作
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
- jQuery实现点击复选框即高亮显示选中行 全选、反选
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- 转载和积累系列 - Jquery 复选框全选操作代码
- 复选框的一下额操作|全选 取消全选 反选 选中值
- jquery 实现复选框的全选操作实例代码
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
- jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)
- jQuery实现点击复选框即高亮显示选中行 全选、反选
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
- JQuery之子复选框全部选中则全选框选中
- jquery .prop()的相关操作——全选、反选、获得所有选中的checkbox
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
- jQuery实现checkbox(复选框)选中、全选反选代码