jquery Action radio button and check button sample _jquery

Source: Internet
Author: User
radio buttons and check buttons are frequently used during the development process, and I'll go through the jquery operation radio buttons and check buttons:

radio button:

Get a radio button object through jquery We have three ways:

①id:$ ("#radioId")

②name:$ (": Input[name= ' Radioname ']")

③type:$ ("Input[type=radio]"), may be written on the information above: $ ("" "input[@type =radio]" "), which is related to your jquery version, if the old version of the latter, the new version of the former, If you do not know your version is suitable for which one to try each, anyway, a try can be done, but also to learn knowledge, why not!

As we all know, in a group of radio buttons can only make a valid, to achieve this effect, many people may think that the ID changed to the same can be, in fact, you go to try it will know that in a group of radio buttons can still select multiple. Because the key attribute that implements this effect is not the ID, but the name.

After the introduction, we put it into use only:

After we get the object of the radio button, we have to iterate over the object, because the type of the object is an array, we have to determine whether it is selected, and then remove the desired value from the selected button, the sample code is as follows:
Copy Code code as follows:

var Itemradio = $ ("Input[type=radio]");
Result= "";
Nums = Itemradio.length;
for (i=0;i<nums;i++) {
if (itemradio[i].checked) {
result = itemradio[i].value+ "," +itemradio[i].id+ ";" +result;
}
}

Result is the value I want to get, and that value in front of you may be able to read it, and the one behind that ID may be confused. Here, I'll do an extension: All the objects in JS can go directly through the "." To get the value of the property.

check box:

About the checkbox, all we need is a "select and reverse" effect, and using jquery can be done in just one sentence, as follows:
Copy Code code as follows:

var checkedobj = $ (' input:checkbox[name= ' checkbox ']:checked ');
var values = "";
Checkedobj.each (function () {
var value=this.value + ",";
Values + = value;
});

OK, you can use the two pieces of code above to operate check box and radio button!

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.