如何使用JavaScript/jQuery遍历同ID的项目卡片单选框

多卡片列表渲染场景下，所有卡片内的单选控件使用了重复ID，调用ID选择器时仅会命中页面第一个匹配元素，导致无法给后续卡片的单选控件正确设置选中状态，无法实现「按卡片维度读取localStorage存储值，分别设置对应卡片单选状态」的需求。

• 违反HTML规范：同一页面中元素ID必须全局唯一，重复ID会导致所有ID选择器查询失效，仅返回第一个匹配元素
• 查找范围错误：原有逻辑全局查找单选控件，没有将查找范围限定在当前正在渲染的卡片内部，无法精准定位当前卡片的元素
• 单选分组冲突：所有卡片的radio都使用了相同的name="downloadValue"属性，会导致跨卡片单选互斥，点击任意卡片的单选会清空其他卡片的选中状态

1. 修改卡片HTML模板 #

移除固定ID，改用class作为选择器标识，同时给每个卡片的radio组拼接唯一标识作为name，避免跨组互斥：

<form class="g-item-title" style="color: #005e95">
  <input 
    type="radio" 
    class="checkboxPartialDownload" 
    data-dojo-attach-event="onClick: _test" 
    style="cursor: pointer;" 
    name="downloadValue_${fileid}"
    value="partialDownload" 
    checked
  >
  Allow Partial Download
  <br>
  <input 
    type="radio" 
    class="checkboxFullDownload" 
    data-dojo-attach-event="onClick: _onclickTest" 
    style="cursor: pointer;" 
    name="downloadValue_${fileid}"
    value="fullDownload"
  >
  Allow Partial + Full Download
</form>

注：上述模板中的${fileid}为渲染时的卡片唯一标识变量，按你使用的模板语法替换为对应取值逻辑即可。

2. 修正渲染逻辑 #

所有元素查找操作限定在当前卡片的DOM范围内，不再使用全局ID选择器：

render: function (hit) {
  const dataTitle = hit.sort[0];
  const dataid = hit._source.fileid;
  // 锁定当前渲染卡片的根DOM节点，dojo框架下直接取this.domNode即可，其他场景替换为当前卡片的根选择器
  const $currentCard = $(this.domNode);
  const savedStatus = localStorage.getItem(dataTitle);

  // 仅在当前卡片范围内查找单选控件
  const $partialDownloadRadio = $currentCard.find('.checkboxPartialDownload');
  const $fullDownloadRadio = $currentCard.find('.checkboxFullDownload');

  // 按存储值设置选中状态
  if (savedStatus === "FullDownload") {
    $partialDownloadRadio.prop('checked', false);
    $fullDownloadRadio.prop('checked', true);
  } else {
    $partialDownloadRadio.prop('checked', true);
    $fullDownloadRadio.prop('checked', false);
  }
}

3. 补全点击存储逻辑 #

补充部分下载选项的点击事件，保证两个选项的状态都能正确存入localStorage：

_onclickTest: function(evt){
  const title = this.item.title;
  localStorage.setItem(title, 'FullDownload');
},
_test: function(evt){
  const title = this.item.title;
  localStorage.setItem(title, 'PartialDownload');
}

• 列表循环渲染的场景下，禁止给列表项内元素设置固定ID，需要批量操作的元素统一使用class标识
• 操作列表项内元素时，必须先定位到当前项的根容器，再在容器范围内做元素查找，避免全局选择器匹配到其他列表项的元素
• 同一分组的radio必须保持name属性一致，不同分组的radio必须保证name属性唯一，避免出现跨分组互斥的异常

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