Home > Web Front-end > JS Tutorial > jquery checkbox CHECKBOX select all, invert selection_jquery

jquery checkbox CHECKBOX select all, invert selection_jquery

WBOY
Release: 2016-05-16 19:01:34
Original
1168 people have browsed it

How to use: We first save the following JS as a file and call it later. You can also write it directly on the page. It is recommended to use the former for easy reuse:

Copy code The code is as follows:

(function($){
$.fn.checkgroup = function(options){
//merge settings
settings=$.extend({
groupSelector:null,
groupName:'group_name',
enabledOnly:false
},options || {});

var ctrl_box=this;


//allow a group selector override option
var grp_slctr = (settings.groupSelector==null) ? 'input[name=' settings.groupName ']' : settings.groupSelector;

//grab only enabled checkboxes if required
if(settings.enabledOnly)
{
grp_slctr = ':enabled';
}

//attach click event to the "check all" checkbox(s)
ctrl_box.click(function(e){
chk_val=(e.target.checked);
$(grp_slctr). attr('checked',chk_val);
//if there are other "select all" boxes, sync them
ctrl_box.attr('checked',chk_val);
});
/ /attach click event to checkboxes in the "group"
$(grp_slctr).click(function(){
if(!this.checked)
{
ctrl_box.attr('checked', false);
}
else
{
//if # of chkbxes is equal to # of chkbxes that are checked
if($(grp_slctr).size()==$( grp_slctr ':checked').size()){
ctrl_box.attr('checked','checked');
}
}
});
//make this function chainable within jquery
return this;
};
})(jQuery);
Mainly look at the following usage methods:
Copy code The code is as follows:

checkall

chk1

chk2

chk3

chk4
$(function() {
$("#checkall") .click(function() {
$('.checkall').checkgroup({groupSelector:'.groupclass',enabledOnly:true});
});
});

or the following way:

Copy the code The code is as follows:

$(function() {
$("#checkall").click(function() {
$('#checkall').checkgroup({groupName:'group '});
});
});

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template