javascript - 如何获取选中的单选按钮的文本？

Question

我有一组单选按钮，想要获取选中的单选按钮，然后提醒文本，而不仅仅是它的值。为了解释更多，当用户单击第一个单选按钮，然后提交表单时，我希望浏览器提醒“桌面案例”。我想在没有 jQuery 的情况下实现这一目标。

<form action="" name="form1">
    <label for="radio400">Desktop Case</label>
    <input type="radio" name="rad_case" value="400" id="radio400"/>

    <label for="radio401">Mini Tower</label>
    <input type="radio" name="rad_case" value="401" id="radio401"/>

    <label for="radio402">Full Tower</label>
    <input type="radio" name="rad_case" value="402" id="radio402"/>

    <input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>

Answer 1

以下内容适用于您的示例。它使用 CSS 选择器来定位已检查的输入。根据其 id，找到适当的标签:

function update_order_onclick() {
  var value= 'Nothing selected',
      selected= document.querySelector('input[name="rad_case"]:checked'),
      selection= document.querySelector('#selection');
  
  if(selected) {
    value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
  }

  selection.innerHTML= value;
}

<form action="" name="form1">
    <label for="radio400">Desktop Case</label>
    <input type="radio" name="rad_case" value="400" id="radio400"/>
    <br>

    <label for="radio401">Mini Tower</label>
    <input type="radio" name="rad_case" value="401" id="radio401"/>
    <br>

    <label for="radio402">Full Tower</label>
    <input type="radio" name="rad_case" value="402" id="radio402"/>
    <br>

    <input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>

<div id="selection"></div>