Question

我有一个像这样的单选按钮列表：

<div id="TheOptions">
  <input type="radio" id="test1" name="mylist"/>option 1
  <input type="radio" id="test2" name="mylist"/>option 2
  <input type="radio" id="test3" name="mylist"/>option 3
  <input type="radio" id="test4" name="mylist"/>option 4
</div>

写作时

  $('#test1').html('best option');

文本被添加到单选按钮，当前文本“选项1”仍然显示。

如何更改此功能以使其正常工作？

感谢。

Answer 1

您应该将文字换成<label>元素：

<div id="TheOptions">
  <input type="radio" id="test1" name="mylist"/><label for="test1">option 1</label>
  <input type="radio" id="test2" name="mylist"/><label for="test1">option 2</label>
  <input type="radio" id="test3" name="mylist"/><label for="test1">option 3</label>
  <input type="radio" id="test4" name="mylist"/><label for="test1">option 4</label>
</div>

现在，您的文字与相应的单选按钮明确关联，用户甚至可以点击文字，视障用户也会非常感谢提高了可用性。然后你可以这样做：

$('label[for=test1]').html('best option');

更改单选按钮的文本

1 个答案: