获取选中单选按钮的值

Question

我在一个表单中用HTML定义了一组单选按钮如下。我的表单名称是"MyForm"。当选择女性时，我想让一个变量的值等于"Female"。

<fieldset data-role="controlgroup" data-type="horizontal" id="gender" name="gender">
                    <legend>Gender :</legend>
  <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                        <label for="radio-choice-1">Male</label>

 <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"/>
                        <label for="radio-choice-2">Female</label>
                </fieldset>

我尝试使用变量 var。

genderValue = $('input[name=gender]:checked', '#MyForm').val()

但是这并没有起作用。正确的方法是什么？

- harsh

---

var selected = 'checked="checked"'; var e = document.getElementById("state"); var state_selected = e.options[e.selectedIndex].value; 试一下这个 - Abhay Kumar

为什么不直接使用以下代码：<input type="radio" name="gender" value="男"/> <input type="radio" name="gender" value="女"/>？ - Musa

我不确定为什么你在使用$('input[name=gender]，你应该使用$('input[name=radio-choice-1]:checked'。 - codeomnitrix

Answer 1

您可以将值（female，...）存储在输入框的value属性中，根据您的标记，您可以尝试以下方法：

$('input[name="radio-choice-1"]').change(function(){
   var genderValue = $(this).next('label').text()
})

但是我建议使用这个：

<fieldset data-role="controlgroup" data-type="horizontal" id="gender" name="gender">
   <legend>Gender :</legend>
   <input type="radio" name="radio-choice-1" id="radio-choice-1" value="Male" checked="checked" />
   <label for="radio-choice-1">Male</label>
   <input type="radio" name="radio-choice-1" id="radio-choice-2" value="Female"/>
   <label for="radio-choice-2">Female</label>
</fieldset>

$('input[name="radio-choice-1"]').change(function(){
   var genderValue = this.value
})

- Ram

Answer 2

您的问题已经得到解决，解决方案如下：

HTML：

<form id="MyForm" name="MyForm" method="post">
  <fieldset>
    <legend>
      Gender
    </legend>
    <div id="panel">
      <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
      <label for="radio-choice-1">
        Male
      </label>
      <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
      <label for="radio-choice-2">
        Female
      </label>
    </div>
    <div id="result">
    </div>
  </fieldset>
</form>

jQuery：

$(function() {
    $('input[name="radio-choice"]').change(function() {
        var genderValue = $(this).next('label').text();
        $("#result").html("<p> You have selected " + genderValue + ".");
    })
});

我已经在http://codebins.com/bin/4ldqpaa上完成了代码测试。

- gaurang171

Answer 3

这可能对某些人有帮助，这里是另一种检索选定单选按钮值的方法

var gender = $('input[name="radio-choice-1"]:checked').val();

在这里，将id设置为单选按钮是可选的。

愉快编码！....

- Sudhir Bhapkar