【jQuery】对于复选框操作的attr与prop
2017-05-26 14:06
344 查看
这个是在jQuery1.6版本号之后出现的鬼东西。受影响的主要有下拉列表select与复选框checkbox。众所周知。在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是这样了,比方我要取出其是否被选中的属性checked,attr("checked")去取没有选中的复选框是undefinded的。仅仅能取出被选中复选框的属性。这个问题,导致我在一个条件推断中忙活了比較久的事件。查了一下发现,在jQuery1.6版本号之后,你取复选框有没有被选中,要用prop
举个样例还说明这个问题,例如以下代码。设置两行全然一模一样的东西,两button对一复选框进行操作,一个行内文本,用来显示Jquery的属性,唯一不同的是一个用了attr属性,一个用了prop属性:
不管选中还是没有选中一直是checked的状态,而第二行使用了prop,选中是true,没选中是没有选中的undefinded。这才干真正用于if条件的推断。使用attr取复选框是否被选中,放到if中,仅仅会对头两次选择有效,之后就失效了。因此,以后再jQuery搞复选框,没什么事还是用prop。
jQuery你丫为何各个版本号的代码会不同呢?为何不能像Javascript一样,能取就能改呢?
举个样例还说明这个问题,例如以下代码。设置两行全然一模一样的东西,两button对一复选框进行操作,一个行内文本,用来显示Jquery的属性,唯一不同的是一个用了attr属性,一个用了prop属性:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>attr与prop</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body> attr: <button id="selected1"/>选中复选框 </button> <button id="unselected1"/>不选中复选框 </button> <input type="checkbox" id="checkBox1" /> <span id="tip1"></span><br/> prop: <button id="selected2"/>选中复选框 </button> <button id="unselected2"/>不选中复选框 </button> <input type="checkbox" id="checkBox2" /> <span id="tip2"></span><br/> </body> </html> <script type="text/javascript"> $("#selected1").click(function(){ $("#checkBox1").attr("checked",true); $("#tip1").html($("#checkBox1").attr("checked")); }); $("#unselected1").click(function(){ $("#checkBox1").attr("checked",false); $("#tip1").html($("#checkBox1").attr("checked")); }); $("#selected2").click(function(){ $("#checkBox2").prop("checked",true); $("#tip2").html($("#checkBox2").prop("checked")); }); $("#unselected2").click(function(){ $("#checkBox2").prop("checked",false); $("#tip2").html($("#checkBox2").prop("checked")); }); </script>执行效果却得到例如以下所看到的。极其令人吃惊的是,尽管相同可以改变复选框的值,使用attr方法去操作的复选框的第一行。其值一直没有改变。
不管选中还是没有选中一直是checked的状态,而第二行使用了prop,选中是true,没选中是没有选中的undefinded。这才干真正用于if条件的推断。使用attr取复选框是否被选中,放到if中,仅仅会对头两次选择有效,之后就失效了。因此,以后再jQuery搞复选框,没什么事还是用prop。
jQuery你丫为何各个版本号的代码会不同呢?为何不能像Javascript一样,能取就能改呢?
相关文章推荐
- 【jQuery】对于复选框操作的attr与prop
- jquery 1.6以后attr对于checked不起作用,其替代方法为prop
- jquery中attr和prop的区别—判断复选框选中状态
- jQuery 中对控件属性的操作 prop 和 attr 的区别
- jquery 复选框操作-prop()的使用
- jquery 属性操作(attr/removeAttr/prop/val/text)
- jquery 属性操作 attr( ) prop()css( )区别
- jQuery——操作复选框(checkbox) attr checked不起作用
- JQUERY中,复选框使用prop,attr方法时的一些注意
- jquery系列之prop、attr以及对checkbox的操作
- jquery判断复选框选中状态以及区分attr和prop
- JQuery 对属性操作 以及PROP和ATTR的区别
- JQuery设置checkbox复选框,attr不可行,prop才是正确答案
- jQuery 操作复选框(checkbox) attr checked不起作用
- jQuery 操作复选框(checkbox) attr checked不起作用
- 关于jQuery操作复选框checkbox的attr无效的问题的解决方案
- JQuery设置checkbox复选框,attr不可行,prop才是正确答案
- jQuery 操作复选框(checkbox) attr checked不起作用
- jQuery实现复选框——attr()和prop()的不同
- jQuery 操作复选框(checkbox) attr checked不起作用