如何使用 jQuery 正确更改单选按钮标签?

Posted

技术标签:

【中文标题】如何使用 jQuery 正确更改单选按钮标签?【英文标题】:How do I properly change radio button labels with jQuery? 【发布时间】:2020-12-12 10:43:21 【问题描述】:

我正在使用 jQuery 3.5.1。我有这个 html

<form>
    <div><input type="radio" id="radio0" name="choice" >Text1</div>
    <div><input type="radio" id="radio1" name="choice" >Text2</div>
    <div><input type="radio" id="radio2" name="choice" >Text3</div>
    <div><input type="radio" id="radio3" name="choice" >Text4</div>

我想更改单选按钮旁边的标签,所以我这样做了...

for (let i=0; i<choices.length; i++) 
    $('#radio' + i).text(choices[i]);
    $('#radio' + i).val(choices[i] == age ? CORRECT : INCORRECT);
    $('#radio' + i).attr("checked", false);

但是,新标签不会出现在屏幕上。当我检查 Firefox(在 Mac 上)中的元素时,我看到了这个

<div><input type="radio" id="radio0" name="choice" value="incorrect">27
Text1</div>
<div><input type="radio" id="radio1" name="choice" value="incorrect">24
Text2</div>
<div><input type="radio" id="radio2" name="choice" value="incorrect">21
Text3</div>
<div><input type="radio" id="radio3" name="choice" value="correct">30
Text4</div>
<div id="feedback" style="display: none;"></div>
<div>
    <input type="button" value="Submit" id="submitAnswer">
</div>

因此元素以某种方式被填充(“27”、“24”等),但旧元素仍然存在(“Text1”),屏幕上显示的是“Text-”标签而不是号码。构建 HTML/编写 jQuery 以更改单选按钮标签的正确方法是什么?

【问题讨论】:

【参考方案1】:

使用&lt;label&gt; 包裹的收音机更容易使用,因为整个标签都是事件的目标。

然后,如果您添加 &lt;span&gt; 来包装文本,它就成为 DOM 查询的简单目标

const newVals = [111, 444, 777, 999]

newVals.forEach((v, i) => 
  const $input = $('#radio' + i).val(v).prop('checked', false);
  $input.next('span').text(v);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
    <input type="radio" id="radio0" name="choice" >
    <span>Text1</span>
  </label>
</div>
<div><label><input type="radio" id="radio1" name="choice" ><span>Text2</span></label></div>
<div><label><input type="radio" id="radio2" name="choice" ><span>Text3</span></label></div>
<div><label><input type="radio" id="radio3" name="choice" ><span>Text4</span></label></div>

【讨论】:

【参考方案2】:

您是否考虑过为字符串使用标签?

<div><input type="radio" id="radio0" name="choice" ><label id="label0">Text1</label></div>

那你能做到吗?

for (let i=0; i<choices.length; i++) 
    $('#label' + i).text(choices[i]);
    $('#radio' + i).val(choices[i] == age ? CORRECT : INCORRECT);
    $('#radio' + i).attr("checked", false);

【讨论】:

对于与无线电检查交互的标签应该包装输入或添加for

以上是关于如何使用 jQuery 正确更改单选按钮标签?的主要内容,如果未能解决你的问题,请参考以下文章

更改单选按钮状态时更改标题

jQuery使用数据目标更改带有onClick侦听器的一组单选按钮标签的innerHtml

如何在rails中正确使用单选按钮?

如何更改我的代码以取消选中从 javascript 到 jQuery 的单选按钮? [复制]

如何更改单选按钮值[重复]

jQuery选择器如何选择页面中的所有单选按钮和多选按钮?