获取jQuery中选中的单选按钮的值

时间:2015-09-28 20:56:48

标签: javascript jquery radio-button

我有一些问题和答案。我想将已检查的答案存储在变量中。每个答案都是一个单选按钮。例如:

<h4 class='ques1'>Question one here here</h4>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 1
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 2
        </label>
    </div>

 <h4 class='ques2'>Question two here here</h4>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 1
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 2
        </label>
    </div>

然后我设置了变量来存储选中的答案......

var ques1Answer, ques2Answer;

我不确定您是否需要查询label标签或输入标签以获取值。但这就是我尝试过的:

$('h4.ques1 div.checkbox label input').on('change', function(){
     ques1Answer = $(this).val();
  });

1 个答案:

答案 0 :(得分:0)

您的第一个选择器错误'h4.ques1 div.checkbox label input'
 DIV不是h4.ques1的孩子,请使用:

$('div.checkbox label input')

如果你使用.val()暗示实际上你有一个值属性,否则你最好分配一些name属性:

<input type="checkbox" name="Question-A-1">
<input type="checkbox" name="Question-A-2">

因此,即使您获得了"on" / "off"(默认值),您也始终知道这些值所指的name实体是什么。< / p>

值得注意如果每个问题只有一个答案可能而不是你想要使用单选按钮

<input type="radio" name="Question-A" value="1">
<input type="radio" name="Question-A" value="2">

在这种情况下,在var内只保留一个每个值的值是有意义的。

将所有问题包裹在<form>内并使用.serialize()获取所有答案:

&#13;
&#13;
$("button").click(function(){
 alert( $("form#questionnary").serialize() );
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="questionnary">
  <h4 class='ques1'>Question one here</h4>
  <div class="checkbox">
    <label>
      <input type="radio" name="Question-A" value="1"> answer 1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="radio" name="Question-A" value="2"> answer 2
    </label>
  </div>

  <h4 class='ques2'>Question two here</h4>
  <div class="checkbox">
    <label>
      <input type="radio" name="Question-B" value="1"> answer 1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="radio" name="Question-B" value="2"> answer 2
    </label>
  </div>
</form>


<button>TEST RESULTS</button>
&#13;
&#13;
&#13;