JQuery gets multiple-marquee values, and the multiple-selection box Chinese function practice by fungleo__ function

Source: Internet
Author: User
JQuery gets multiple-marquee values, and the multiple-selection box Chinese function practice by Fungleo Preface

This method is the one I just used in the project. There may be a better way. But I don't know.

Search a few methods, as if there are errors, do not know if it is someone else's mistake, or my mistake. Therefore, I constructed the following methods to facilitate my use in practice.

Share it, there are fallacies, please point out. 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.

To beautify the contents of the Multiple selection box and the Radio box, you can refer to my blog "about the radio box and check box CSS beautification method" 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);
}
SummaryThe 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 Chinese and English), indent (a full-width space), or the JQ version used are 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. It is more important to complete the project as soon as possible. Language is just a tool.

This article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article first link. Otherwise, the law will be held accountable.
Starting Address: http://blog.csdn.net/FungLeo/article/details/51424587

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.