JQuery operation single-choice button and check button

1. check box operation: & lt; form & gt; your favorite sports are: & lt; inputtype & quot; checkbox & quot; name & quot; item & quot; value & quot; football & quot;/& gt; football & lt; inputtype & quot; checkbox & quot; name & quo

1. Check box operations:

Bind event

$ (Document ). ready (function () {$ ('# checkall '). click (checkAll); // select all $ ('# checkFootball '). click (checkFootball); // single choice football });

Select All. Two methods are provided for selection. For more information, see attributes and form selectors in APIs.

Function checkAll () {$ ('input [type = "checkbox"] [name = "item"] '). attr ("checked", true); // $ ('[name = "item"]: checkbox '). attr ("checked", true );}

Note: you only need to replace "true" with "false" for Full inversion.

Select football

Function checkFootball () {$ ("[name = 'item']: checkbox "). each (function () {if (this. value = 'football') {this. checked = true ;}})}

Note: The purpose is to retrieve and display data from the background. Here, the attr () and val () Methods of jQuery are not used to set and obtain the current checkbox value. Using the JavaScript native Dom method will be more effective than creating jQuery objects.

2. Single-choice button operation:

A B C D which one do you choose:
ABCD

Initialize selected Letter B

$ (Document). ready (function (){
// Select B for data initialization.
$ ('[Name = "item"]: radio'). each (function () {if (this. value = 'B') {this. checked = true;
}});
// Bind the event to get letters $ ('# getLetter'). click (getLetter );
}
);

Get selected letters

Function getLetter () {alert ('the obtained letter is' + $ ('[name = "item"] [checked = true]: radio '). val ());}

 

The selected values obtained by traditional JS are as follows:

[Javascript] function getids (){
Var obj = document. getElementsByTagName ("input ");
Var menuIds = "";
For (var I = 0; I <obj. length; I ++ ){
If (obj [I]. type = "checkbox" & obj [I]. checked = true ){
MenuIds + = obj [I]. value + ",";
}
}
If (menuIds. indexOf (",")! =-1 ){
MenuIds = menuIds. substring (0, menuIds. length-1); // remove the ending,
}
Return menuIds;
}
Function getids (){
Var obj = document. getElementsByTagName ("input ");
Var menuIds = "";
For (var I = 0; I <obj. length; I ++ ){
If (obj [I]. type = "checkbox" & obj [I]. checked = true ){
MenuIds + = obj [I]. value + ",";
}
}
If (menuIds. indexOf (",")! =-1 ){
MenuIds = menuIds. substring (0, menuIds. length-1); // remove the ending,
}
Return menuIds;
}

The single button and the check button are frequently used during development. Next I will use JQuery to operate the single button and check button:

Single button:

There are three ways to obtain a single-choice button object through JQuery:

① ID: $ ("# radioId ")

② NAME: $ (": input [name = 'radioname']")

③ TYPE: $ ("input [type = radio]"), which may be written on some materials: $ ("input [@ type = radio]" "), this is related to your JQuery version. If it is an old version, you can use the new version. If you do not know which version is suitable for use, you can try it one by one, it can be done in one attempt, and you can learn more. Why not!

We all know that only one of the single-choice buttons can take effect. To achieve this effect, many people may think that you can change the ID to the same one. In fact, after you try it, you will know that you can still select multiple radio buttons in a group. Because the key attribute to achieve this effect is not ID, but NAME.

After the introduction, let's put it into use:

After obtaining the single-choice button object, we have to traverse the object, because the object type is an array, and we need to judge whether it is selected one by one, then retrieve the required value from the selected button. The sample code is as follows:

[Javascript] var itemradio = $ ("input [type = radio]");
Result = "";
Nums = itemradio. length;
For (I = 0; I If (itemradio [I]. checked ){
Result = itemradio [I]. value + "," + itemradio [I]. id + ";" + result;
}
}
The result is the value I want to obtain. you may understand the previous value, and some people in the latter ID may be confused. Here, I will make an extension: all objects in JS can directly obtain the attribute value through.

Check box:

For the check box, all we need is the effect of "select all" and "reselect". If JQuery is used, we can do it in just one sentence, as shown below:

[Javascript] var checkedObj = $ ('input: checkbox [name = "checkbox"]: checked ');
Var values = "";
CheckedObj. each (function (){
Var value = this. value + ",";
Values + = value;
});
Now, you can use the above two sections of code to operate the check box and single-choice button !!!

From the light cloud, only this touch