Jquery implements checkbox full selection method_jquery

Yesterday morning I wrote about how to use Jquery to select all

Based on everyone’s opinions, I have modified some of the poorly written aspects of the program. This is because my level is limited and there are various things that I cannot consider.

At the end of the article, I raised a question, and I wanted to write a universal method to call it, so I came up with this article. When I got home at night, I wrote the effect

The examples below are for everyone to discuss and learn from. If you think they are good, you can also apply them directly to the project.

1: Why write this method

There are many online methods for selecting all and none in one sentence, but they seem to have overlooked one problem. The checkbox that selects all can control the sub-checkbox below, but the sub-checkbox below should also be able to control the select all above. In this way This is my method.

2: Development process: To achieve universality, we need to solve two problems, how to group, and how to determine which checkbox in the group is to select all. I thought about it and thought that grouping by name can be used,

Use class to determine whether it is a checkbox group that needs to be fully selected. First find all the classes that need to be selected, and then find the name attribute. You can find other sub-checkboxes based on the name attribute. As long as you find the element, you can operate

3: File, the following is the js I implemented, saved as xs_checkbox_all.js

Copy code The code is as follows:

$(document).ready(function () {
var xsChk = "xsChk";//Defined style
var xsChkAll = "input[type='checkbox'][class='" xsChk "'][name]";//All checkboxes that define this style
$(xsChkAll).each(function () {
        var name = $(this).attr("name");
           name = "input[type='checkbox'][class!='" xsChk "'][name='" name "']";//The sub-checkbox below this all-select box
           $(this).click(function () {
               $(name).attr("checked", $(this)[0].checked);
         })
        var xschk = $(this);
           $(name).click(function () {
               var IAll = $(name).length; //The number of all checkboxes under this sub-project
               var IChk = $(name ":checked").length; //The number of all checked checkboxes under this sub-project
            var isAllChecked = true; //Whether it is all selected
                  if (IAll != IChk) {
                                                                                                                                                                                                                                              isAllChecked = false;
            }
                 $(xschk).attr("checked", isAllChecked);
        });
});
});

Page usage

Copy code The code is as follows:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   


   
   
   

       

全选one

       
        全选
   

       
        1

       
        2

       
        3

       
        4

   

   

   

       

全选two

       
        全选2
   

       
        11

       
        22

       
        33

       
        44

   

   

可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了，以上就是本文的全部内容了，希望大家能够喜欢。