jQuery 获取多选框值与文本的两种实现方式

作者:资源驿站时间:2026-10-30 06:40:24浏览:511

本文介绍利用 jQuery 获取多选框选中值及对应文本的方法。通过遍历选中元素,分别使用 attr("vlaue") 获取值(注意拼写)和 siblings('span').html() 获取文本。针对 jQuery 2.0 版本中 val() 返回 'on' 的问题,提供了替代方案及代码排查建议。

DOM结构

DOM结构

本文涉及的多选框 DOM 结构均遵循统一格式,属于前端基础内容,此处不再赘述。


<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="0">
<span>甘肃</span>
</label>
<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="1">
<span>青海</span>
</label>
<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="2">
<span>陕西</span>
</label>
<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="3">
<span>宁夏</span>
</label>

采用此类结构的优势在于,点击文字区域即可触发多选框的选择状态,同时允许通过 CSS 对整体样式进行美化。

JS代码

返回已选中多选框值的函数

获取多选框值的方法


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”,这与预期不符。

这可能与当前使用的 jQuery 2.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);
}

注意事项与总结

总结

网络上搜索到的代码未必完全正确,但核心思路通常可行。

实际运行中的差异可能源于标点符号(中英文混用)、缩进(全角空格)或 jQuery 版本不一致等因素。

因此,当直接套用代码无法使用时,建议仔细排查上述细节,有时采用更基础的原始方法反而能解决问题。

以上所述是小编给大家介绍的jQuery 获取多选框的值及多选框中文的函数的相关知识,希望能够帮助到大家。

作者最新文章