jQuery 获取多选框值与文本的两种实现方式
本文介绍利用 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 获取多选框的值及多选框中文的函数的相关知识,希望能够帮助到大家。
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办?常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js,怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26
