Jquery implements the full checkbox selection method _ jquery

This article mainly shows you a method to use jQuery to achieve full checkbox selection, as well as the background and process of writing this method. it is very detailed and recommended to you here. Yesterday morning I wrote how to use Jquery to achieve full selection.

According to your comments, I have modified some of the difficult-to-write aspects of the program, and I am still at a limited level. There are various issues that cannot be considered.

At the end of the article, I raised a question. I had to write a general method to call it, so now I had this article. when I got home at night, I wrote the results.

The following example can be used for discussion and study. if you think it is good, you can directly apply it to the project.

1: Why write this method?

There are a lot of questions about selecting all one sentence on the Internet, but it seems that a problem is ignored. the fully selected checkbox can control the following subcheckbox, however, the following sub-checkbox should also be able to control all the above options, so that I can use this method.

2: development process: to achieve general purpose, we need to solve two problems: how to group, how to determine which checkbox in the group is all selected, I thought, I think it is okay to use name grouping,

Use class to determine whether the checkbox group needs to be fully selected. First, find all the classes that need to be fully selected, and then find the name attribute. based on the name attribute, you can find other subcheckboxes. you only need to find the elements and perform operations.

3: File. below is my implemented js, saved as xs_checkbox_all.js

The code is as follows:

$ (Document). ready (function (){
Var xsChk = "xsChk"; // defines the style.
Var xsChkAll = "input [type = 'checkbox'] [class = '" + xsChk + "'] [name]"; // All the checkboxes that define this style
$ (XsChkAll). each (function (){
Var name = $ (this). attr ("name ");
Name = "input [type = 'checkbox'] [class! = '"+ XsChk +"'] [name = '"+ name +"'] "; // subcheckbox under the all-selected box
$ (This). click (function (){
$ (Name). attr ("checked", $ (this) [0]. checked );
})
Var xschk = $ (this );
$ (Name). click (function (){
Var IAll = $ (name). length; // The number of all checkpoints in this subitem
Var IChk = $ (name + ": checked"). length; // The number of checkboxes selected under this subitem
Var isAllChecked = true; // whether it is all selected
If (IAll! = IChk ){
IsAllChecked = false;
}
$ (Xschk). attr ("checked", isAllChecked );
});
});
});

Page usage

The code is as follows: