本方法是我刚在项目中用的方法.可能有更加好的方法.但我不清楚.
搜索了几个方法,好像都有错误,不知道是别人的错误,还是我的错误.因此,我自己构造了以下方法,便于我在实践中使用.
分享出来,有谬误请大家指出.
我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述.
<code class="language-html hljs "><label class="input_checkbox"> <input data-cke-saved-name="sell_area" name="sell_area" type="checkbox" vlaue="0" data-cke-editable="1" contenteditable="false"> <span>甘肃</span> </label> <label class="input_checkbox"> <input data-cke-saved-name="sell_area" name="sell_area" type="checkbox" vlaue="1" data-cke-editable="1" contenteditable="false"> <span>青海</span> </label> <label class="input_checkbox"> <input data-cke-saved-name="sell_area" name="sell_area" type="checkbox" vlaue="2" data-cke-editable="1" contenteditable="false"> <span>陕西</span> </label> <label class="input_checkbox"> <input data-cke-saved-name="sell_area" name="sell_area" type="checkbox" vlaue="3" data-cke-editable="1" contenteditable="false"> <span>宁夏</span> </label></code>
使用这种方法的优点是,点击文字就可以选择多选框了.并且可以使用CSS来美化整个样式.
返回已经选中的多选框的值函数
function returnCheckboxVal(name){
var data="";
$('input:checkbox[name="'+name+'"]:checked').each(function(){
data += $(this).attr("vlaue")+",";
});
return data.substring(0,data.length-1);
}
通过这个函数,可以按照我们的需要,返回相应name值的多选框选中的项目的值,以1,2,3
的方式返回
好,这里需要解释一下了,为什么我使用$(this).attr("vlaue")
这种方式来获取.
其实我从搜索引擎找到的是 $(this).val()
的方式获取的.但是我很奇怪,我返回的值全部是on
.
可能和我使用的是 jquery2.0
的版本有关系,但具体是什么原因,我没有深究.
返回已经选中的多选框的项目名称
如上,可能我需要返回的是甘肃,青海,陕西,宁夏
这样的项目名.当然,这个也是可以做到的.
不过,这个严重依赖我上面的DOM结构,如果结构不相同的话,需要做适当的修改的.
function returnCheckboxItem(name){
var data="";
$('input:checkbox[name="'+name+'"]:checked').each(function(){
data += $(this).siblings('span').html()+",";
});
return data.substring(0,data.length-1);
}