jquery Fuzzy matching checkbox Select all value implement checkbox partial or all Select all

Source: Internet
Author: User

This article summarizes the all-in-one feature of the jquery implementation CheckBox three case

The first: All-in-one selection, also known as the full-selection of name, is implemented by the name of the checkbox named name.

The second kind: Fuzzy Select all, also known as ID blur Select All, through the checkbox ID or value values to implement.

The Third Kind: The value range is all selected, also known as the value range is selected, through the checkbox value value implementation, or intercept the ID number suffix range judgment implementation.


    • Equivalent full selection

In the work will often use the checkbox of the full selection function, usually the most used by all the selection and anti-election is the first, is generally based on the same name of the checkbox for the implementation, this selection is relatively simple. The implementation code is as follows:

$ ("Input#allser"). Click (function () {    if (this.checked) {    $ ("input[type=checkbox][name=newselectedservers] "). attr (" Checked ", true);       } else{    $ ("input[type=checkbox][name=newselectedservers]"). attr ("checked", false);    });
The above code implements the function: When clicked Id= "Allser" the button, all the name name= "Newselectedservers" The checkbox is to be all selected, cancels the entire selection again when clicking again, the function is relatively simple, is no longer detailed.

    • Blur Select All

Fuzzy Select all can implement specific requirements, such as prefixes or suffixes containing specific characters, first understand the rules of jquery fuzzy matching:

[property name] matches the element containing the given property
[Att=value] matches the element containing the given property
[att*=value] fuzzy matching
[Att!=value] cannot be this value
[Att$=value] End is this value
[Att^=value] starts with this value
[ATT1][ATT2][ATT3] ... Match one of the multiple attribute conditions

The implementation examples are as follows:

$ ("input[type=checkbox][name=newselectedservers][id^=new]"). attr ("Checked", true);//Select all the checkbox$ with the ID prefix of new (" Input[type=checkbox][name=newselectedservers][id$=servers]). attr ("Checked", true);//Select all checkbox$ with ID suffix servers ("input[type=checkbox][name=newselectedservers][value^=20]"). attr ("Checked", true);//Select all checkboxes with value prefix 20
The anti-selection code is not posted.

There is also a multi-valued fuzzy Select all, the implementation code is as follows:

$ ("input[type=checkbox][name=newselectedservers][value^=20],[value^=21],[value^=50],[value^=51],[value^=70],[ VALUE^=71] "). attr (" Checked ", true);
The above code implements all checkboxes that start with 20,21,50,51,70,71.


    • Value Range Select all

My headache is the third value access to select all, the first two can not achieve the function I want.

Functional Requirements: The implementation of the server List section of the full selection, the server list of value is a number, the value of a particular function of the server in a specified range, tick select a specific function of the full selection of the list of servers will be the specified range of all selected.

After the demand looks simple, the realization is simple, difficult to find the process of data and in the process of thinking, found a lot of relationships on the internet jquery to achieve a full selection of checkboxes and micro-blog, there is no one in line with my requirements, finally can only through their various ideas, various debugging, Ultimately, it is the function that you want to achieve. The key point of the idea is that most of the general selection is based on the checkbox name and ID, very few people use value to achieve a full selection, think that this is half the success, and then by traversing the size of the comparison value can achieve the full selection of value range, we are eager to know the implementation of the Code bar.

To achieve the full inverse of the nine-tour server, the value range of the nine-tour server is between 2000-5000 $ ("Input#sjspecialser"). Click (function () {if (this.checked) {//) to traverse value, Convert to digital compared to $ ("input[type=checkbox][name=newselectedservers]"). each (function (index,element) {var ServerID = number ( Element.value); if (ServerID >= && ServerID <) {$ (Element). attr ("Checked", true);}); }else{$ ("input[type=checkbox][name=newselectedservers]"). each (function (index,element) {var ServerID = number ( Element.value); if (ServerID >= && ServerID <) {$ (Element). attr ("checked", false);}); }});//Implement the All-in-game server's anti-select, Play server value between 5000-1000 $ ("Input#lwspecialser"). Click (function () {if (this.checked) {//} to traverse value, Convert to digital compared to $ ("input[type=checkbox][name=newselectedservers]"). each (function (index,element) {var ServerID = number ( Element.value); if (ServerID >= && ServerID < 10000) {$ (Element). attr ("Checked", true);}); }else{$ ("input[type=checkbox][name=newselectedservers]"). each (function (index,element) {var ServerID = NUmber (Element.value); if (ServerID >= && ServerID < 10000) {$ (Element). attr ("checked", false);}); }});


It's all over here, jquery. By name, ID, and value, it is possible to select all the checkboxes for each situation, and see if this blog has any checkboxes to choose from. Dry foods do not know well, to be willing to share, reproduced please indicate the source, thank you!




















jquery Fuzzy matching checkbox Select all value implement checkbox partial or all Select all

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.