JQuery gets the values of the multiple-selection boxes and the functions of the multiple-selection box Chinese _jquery

Source: Internet
Author: User

DOM structure

The DOM structure of my multiple-selection box is the following. are basic knowledge, do not do too much elaboration.

<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 using this method is that you can select multiple boxes by clicking on the text. And you can use CSS to beautify the entire style.

JS Code

Returns the value function of a 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);
}

With this function, you can return the value of the item selected by the Multiple-selection box of the corresponding name value as we need it, and return it in a 1,2,3 way.

Well, here's what I need to explain why I use $ (this). attr ("Vlaue") in this way to get.

Actually what I found out of the search engine is $ (this). Val (). But I'm surprised that all the values I return are on.

It may have something to do with the version of jquery2.0 I'm using, but specifically, I didn't delve into it.

Returns the name of the item that has been selected for a multiple-selection box

As above, perhaps I need to return to Gansu, Qinghai, Shaanxi, Ningxia, such as the name of the project. Of course, this can be done.

However, this relies heavily on the DOM structure above me, and if the structure is not the same, it needs to be modified appropriately.

function Returncheckboxitem (name) {
var data= "";
$ (' input:checkbox[name= ', ' +name+ ',]:checked '). each (function () {
Data + = $ (this). Siblings (' span '). HTML () + ",";
}); Return
data.substring (0,data.length-1);
}

Summarize

The code on the web search is not necessarily correct. But the general idea should not be wrong.

The difference may be that the punctuation mark (in English and Chinese), indent (full corner space), or the JQ version used is different.

So when you find the code that you can't use, check it out, or you might be able to solve the problem in a more primitive way.

The above is a small set of jquery for you to get the value of multiple selection boxes and the function of the multiple-selection box Chinese knowledge, hope to be able to help everyone.

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.