Usage: We first save the following JS to have a file, then call, indifferent you can also write directly in the page, recommended the use of the former, convenient reuse:
Copy Code code 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 methods of use:
Copy Code code as follows:
<input type= ' checkbox ' class= ' Checkall ' >checkall<br>
<input class= ' groupclass ' name= ' group ' type= ' checkbox ' >chk1<br>
<input class= ' groupclass ' name= ' group ' type= ' checkbox ' >chk2<br>
<input class= ' groupclass ' name= ' group ' type= ' checkbox ' >chk3<br>
<input class= ' groupclass ' name= ' group ' type= ' checkbox ' >chk4<br>
<input type= ' checkbox ' class= ' checkall ' id= ' Checkall ' >
<?php
$ (function () {
$ ("#checkall"). Click (function () {
$ ('. Checkall '). CheckGroup ({groupselector: '. Groupclass ', enabledonly:true});
});
});
Or the following way:
Copy Code code as follows:
<?php
$ (function () {
$ ("#checkall"). Click (function () {
$ (' #checkall '). CheckGroup ({groupname: ' group '});
});
});