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.