如何让jQuery点击checkbox弹出显示文本而非value属性值

解决方案 #

完全可以实现需求，只需要修改取值逻辑，不再读取input的value属性，改为读取input所在li元素的文本内容即可。

修改后的完整JS代码 #

var checkboxes = $('input[name="price[]"]');

checkboxes.on("click", function() {
  var $checked = checkboxes.filter(":checked"),
    checkedValues = $checked.map(function() {
      // 取当前input的父级li的文本，去除首尾空白字符
      return $(this).parent().text().trim();
    }).get();
  alert(checkedValues);
});

代码说明 #

• 原逻辑中return this.value是直接读取input自带的value属性值，也就是1、3、5、8这类数值
• 替换为$(this).parent().text().trim()后，会先找到input的父节点<li>，读取li内的所有文本，再用trim()去除文本前后的多余空格，就能拿到$200,000 to $299,999这类价格文本
• 如果勾选了多个选项，alert会按勾选顺序输出所有选中的价格文本，用逗号分隔

内容的提问来源于stack exchange，提问作者incognitorecon