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

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);}

Summary

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.