jquery checkbox checkbox Select all, Reverse _jquery

Source: Internet
Author: User
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 '});
});
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.