jQuery全选反选插件

(function($){
$.fn.check = function(options){
var options = $.extend({
element : "input[name='node']"
},options);
return this.each(function(){
var self = $(this);
var elements = $(options.element);
self.click(function(){
elements.each(function(index,dom){
dom.checked = self.prop("checked"); //将本身self的状态赋值给elements的状态
});
});
elements.click(function(){
var leng = elements.filter(":checked").length;
if(leng == elements.length){
self.prop("checked",true);
}else{
self.prop("checked",false);
}
});
});
}
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" id="selAll"/>全选</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.<input type="checkbox" name="node"/></td>
</tr>
<tr>
<td>2.<input type="checkbox" name="node"/></td>
</tr>
<tr>
<td>3.<input type="checkbox" name="node"/></td>
</tr>
<tr>
<td>4.<input type="checkbox" name="node"/></td>
</tr>
</tbody>
</table>
<script src="../jquery.min.js"></script>
<script src="check.js"></script>
<script>
$("#selAll").check();
</script>
</body>
</html>

自写了一个全选反选的jQuery插件,根据项目需求进行插件的修改,如根据选择的数量来进行是否选中。

上一篇:cocos2d-x action执行完毕的回调


下一篇:jquery、js全选反选checkbox