jQuery全选与反选,且解决点击只执行一次的问题
Posted Lily.L
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery全选与反选,且解决点击只执行一次的问题相关的知识,希望对你有一定的参考价值。
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list[]" value="1" />1 <input type="checkbox" name="chk_list[]" value="2" />2 <input type="checkbox" name="chk_list[]" value="3" />3 <input type="checkbox" name="chk_list[]" value="4" />4 <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选 <script type="text/javascript"> $("#chk_all").click(function(){ // 使用attr只能执行一次 $("input[name=\'chk_list[]\']").attr("checked", $(this).attr("checked")); // 使用prop则完美实现全选和反选 $("input[name=\'chk_list[]\']").prop("checked", $(this).prop("checked"));
// 获取所有选中的项并把选中项的文本组成一个字符串
var str = \'\';
$($("input[name=\'chk_list[]\']:checked")).each(function(){
str += $(this).next().text() + \',\';
});
alert(str); }); </script> </body> </html>
总结:
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
- 参考 http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
以上是关于jQuery全选与反选,且解决点击只执行一次的问题的主要内容,如果未能解决你的问题,请参考以下文章