JQuery gets the value of the multiple-choice box and the function of the multiple-choice box in Chinese. jquery multiple-choice

Source: Internet
Author: User

JQuery gets the value of the multiple-choice box and the function of the multiple-choice box in Chinese. jquery multiple-choice

DOM Structure

The dom structure of my multi-choice box is as follows. It is basic knowledge and will not be elaborated too much.

<Label class = "input_checkbox"> <input type = "checkbox" name = "sell_area" vlaue = "0"> <span> Gansu </span> </label> <label class = "input_checkbox"> <input type = "checkbox" name = "sell_area" vlaue = "1"> <span> Qinghai </span> </label> <label class = "input_checkbox"> <input type = "checkbox" name = "sell_area" vlaue = "2"> <span> Shaanxi </span> </label> <label class = "input_checkbox ""> <input type =" checkbox "name =" sell_area "vlaue =" 3 "> <span> Ningxia </span> </label>

The advantage of this method is that you can select multiple boxes by clicking the text, and you can use CSS to beautify the entire style.

JS Code

Returns the value function of the selected multiple selection box.

function returnCheckboxVal(name){var data="";$('input:checkbox[name="'+name+'"]:checked').each(function(){data += $(this).attr("vlaue")+",";});return data.substring(0,data.length-1);}

Through this function, we can return the value of the project selected in the multiple-choice box of the corresponding name value according to our needs, in the form of 1, 2, 3

Well, here I need to explain why I use $ (this). attr ("vlaue") to get it.

Actually, what I found from the search engine is the $ (this). val () method, but I am surprised that all the values I returned are on.

It may be related to my use of jquery2.0.

Returns the project name of the selected multiple-choice box.

As shown above, I may need to return project names such as Gansu, Qinghai, Shaanxi, and Ningxia. Of course, this can also be done.

However, this is heavily dependent on the DOM structure above. If the structure is different, you need to make appropriate modifications.

function returnCheckboxItem(name){var data="";$('input:checkbox[name="'+name+'"]:checked').each(function(){data += $(this).siblings('span').html()+",";});return data.substring(0,data.length-1);}


The Code searched on the Internet may not be correct, but the general idea should not be wrong.

The differences may be punctuation marks (Chinese and English), indentation (Chinese full-width spaces), or different JQ versions used.

So when the code you find is not usable, check it carefully. A more primitive method may solve the problem.

The above section describes jQuery's knowledge of getting the value of multiple selection boxes and functions of multiple selection boxes in Chinese. I hope this will help you.

Related Article

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.