(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插件，根据项目需求进行插件的修改，如根据选择的数量来进行是否选中。