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

How to get the text of the checked radio button?

本文关键字：单选按钮 文本 何获取 获取      更新时间：2023-09-26

我有一组单选按钮，想要获取选中的单选按钮，然后提醒文本，而不仅仅是它的值。为了解释更多，当用户单击第一个单选按钮，然后提交表单时，我希望浏览器提醒"桌面案例"。我想在没有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>

以下内容适用于您的示例。 它使用 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>

首先，我们创建一个函数来循环访问我们拥有的单选按钮组，并检查它是否被选中。

        function get_radio_val(form, name)
        {
            var val;
            var radios = form.elements[name];
            for (var i =0; i < radios.length; i++)
            {
                if (radios[i].checked)
                {
                    val = radios[i];
                    break;
                }
            }
            return val;
        }

然后我们编写将在onclick事件上执行的函数。

        function update_order_onclick()
        {
            var val = get_radio_val(document.form1, 'rad_case');
            var val_id = val.id;
            var selector = 'label[for=' + val_id + ']';
            var label = document.querySelector(selector);
            var label_text = label.innerHTML;
            alert(label_text);
        }

在这里帮助我们的是，标签for属性必须与单选按钮id的值相同，这就是我们在上面的函数中选择它的方式。

只需执行以下操作：

var checked = document.querySelector('input:checked'); 
var id = checked?checked.id:'bla';
var lab = document.querySelector('label[for='+id+']');
var lab_text = lab?lab.textContent:'';
相关文章：