JQuery fuzzy match checkbox select all values to achieve partial or all checkbox selections

JQuery fuzzy match checkbox select all values to achieve partial or all checkbox selections

This article summarizes jQuery's ability to select all three checkbox conditions.

First: equi-all, also known as name equi-all, is achieved through the checkbox name.

Type 2: Fuzzy full selection, also known as id fuzzy full selection, is achieved through the id or value of checkbox.

Third, select all value ranges, or select all value ranges. Use the value of checkbox or extract the id and suffix range to determine the value range.

 

 

Select all equal values

 

The full selection function of the checkbox is often used in the work. In general, the most frequently used full selection and inverse selection are the first one. They are generally implemented based on the checkbox with the same names. This full 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);    }});

Functions implemented by the above Code: When you click the id = "allSer" button, all the checkboxes with the name = "newselectedServers" will be selected, and when you click again, the entire selection will be canceled, the function is simple and will not be detailed in detail.

 

 

Fuzzy select all

 

Fuzzy Selection can meet specific requirements. For example, if the prefix or suffix contains specific characters, you should first understand the jQuery Fuzzy Matching rules:

[Attribute name] matches the element containing the given attribute
[Att = value] matches the element containing the given attribute
[Att * = value] fuzzy match
[Att! = Value] cannot be this value
[Att $ = value] end with this value
[Att ^ = value] starts with this value.
[Att1] [att2] [att3]... matches one of Multiple Attribute Conditions

Implementation example:

 

$ ("Input [type = checkbox] [name = newselectedServers] [id ^ = new]"). attr ("checked", true ); // select all the checkboxes whose IDs are prefixed with new $ ("input [type = checkbox] [name = newselectedServers] [id $ = servers]"). attr ("checked", true ); // select all the checkboxes with IDs suffixed with servers $ ("input [type = checkbox] [name = newselectedServers] [value ^ = 20]"). attr ("checked", true); // select all checkboxes whose values are prefixed with 20.

The same Code is not pasted out.

 

There is also a type of multi-Value Fuzzy full selection, 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 preceding Code Selects all checkpoints starting with 20, 21, 50, 51, 70, and 71.

 

 

Select All values

 

What makes me a headache is that the third type of access is all selected, and the first two cannot implement the functions I want.

Function requirements: select all the servers in the server list. The value of the server list contains numbers. The value of a server in a specific function is within a specified range, when you select all functions, You must select all servers in the specified range.

In the future, the requirements will look simple and easy to implement. It is difficult to find information and the process of thinking. jQuery has found many relationships on the Internet to achieve full data selection and Weibo for checkbox, none of them meet my requirements. In the end, I can only use my own ideas and various debugging methods to implement the desired functions. The key point of the idea is that most of the general selections are based on the name and id of the checkbox, and few people use the value for full selection. Half of the results are successful, by traversing the Compare value size, you can select all the value ranges. You can't wait to know the implementation code.

 

// Implement full invert selection of 9 game servers. The value range of 9 game servers is between and $ ("input # sjspecialSer "). click (function () {if (this. checked) {// traverses the value and converts it to numeric comparison $ ("input [type = checkbox] [name = newselectedServers]"). each (function (index, element) {var serverId = Number (element. value); if (serverId >=2000 & serverId <5000) {$ (element ). attr ("checked", true) ;}}) ;}else {$ ("input [type = checkbox] [name = newselectedServers]"). each (function (index, element) {var serverId = Number (element. value); if (serverId >=2000 & serverId <5000) {$ (element ). attr ("checked", false) ;}}) ;}); // implements a full invert selection of the happy play server, the value of the happy play server is between and $ ("input # lwspecialSer "). click (function () {if (this. checked) {// traverses the value and converts it to numeric comparison $ ("input [type = checkbox] [name = newselectedServers]"). each (function (index, element) {var serverId = Number (element. value); if (serverId >=5000 & serverId <10000) {$ (element ). attr ("checked", true) ;}}) ;}else {$ ("input [type = checkbox] [name = newselectedServers]"). each (function (index, element) {var serverId = Number (element. value); if (serverId >=5000 & serverId <10000) {$ (element ). attr ("checked", false );}});}});

 

Now it's very clear that jQuery uses name, id, and value to select all the checkboxes in various situations. After reading this blog, Is it difficult for you to select all the checkboxes? Do not know what you want to do. Be happy to share it. repost it and mark the source. Thank you!