Question

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

＆＃13;

<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>

＆＃13;

Answer 1

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

        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具有相同的值，这就是我们在上述函数中选择它的方式。

Answer 2

以下适用于您的示例。它使用CSS选择器来定位已检查的输入。根据其ID，找到相应的标签：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

只需执行以下操作：

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:'';

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

3 个答案: