模板循环生成的单选框点击时无法获取对应值的解决方法咨询

问题本质 #

你循环生成单选按钮时重复使用了id="list-name"——DOM规范里ID必须是唯一的，所以$('#list-name').val()永远只会拿到第一个匹配元素的值；而且所有<label>的for属性都指向同一个ID，点击标签时也只会触发第一个单选框。

方案1：通过表单事件获取选中值（最省心） #

不用改HTML结构，直接在事件处理里从表单中筛选出被选中的单选按钮：

$(document).on('change', '#form-1', function (){
  const selectedVal = $(this).find('input[name="list-radio"]:checked').val();
  console.log(selectedVal);
});

原理：利用事件委托的this指向当前表单，再通过name属性筛选单选框，:checked伪类直接定位到选中的那个，完美避开ID重复的问题。

方案2：用onclick传入当前元素 #

给每个单选按钮加onclick事件，直接把当前元素传给处理函数，就能拿到对应值：

<form id="form-1">
{% for u in user %}
  <li>
    <div>
       <input type="radio" value="{{ u.name }}" name="list-radio" onclick="logRadioVal(this)">
       <label>{{ u }}, {{ u.name }}</label>
    </div>
  </li>
{% endfor %}
</form>

<script>
function logRadioVal(radioEl) {
  console.log(radioEl.value);
}
</script>

如果想保留label点击选中的功能，可以给每个input生成唯一ID，对应的labelfor属性也同步修改：

<input id="list-name-{{ loop.index }}" type="radio" value="{{ u.name }}" name="list-radio" onclick="logRadioVal(this)">
<label for="list-name-{{ loop.index }}">{{ u }}, {{ u.name }}</label>

方案3：修复ID唯一性（兼顾label绑定） #

如果一定要保留ID和label的绑定，给每个循环项生成唯一ID，然后搭配方案1的JS代码即可：

<form id="form-1">
{% for u in user %}
  <li>
    <div>
       <input id="list-name-{{ loop.index }}" type="radio" value="{{ u.name }}" name="list-radio">
       <label for="list-name-{{ loop.index }}">{{ u }}, {{ u.name }}</label>
    </div>
  </li>
{% endfor %}
</form>

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