jquery - 当用户单击单选按钮时获取单选按钮的值

Question

在一个表单中，我有 2 个输入，当用户填写第一个输入时，第二个输入会自动填充，然后将它们发布到服务器。

<div class="form-group">
  <div class="col-lg-2">
    <select name="id" class="form-control" id="select" required> 
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
  </div>

 <div class="col-md-2 col-sm-3">                      
      <input type="text" class="form-control" id="inputName" name="car" required>
 </div>
</div>

和脚本

var names = ${mylist} // I load here the list
$('#select').on('change keyup', function(e) {

  var i = this.selectedIndex;
  var txt = i ? names[i - 1] : '';
  var status=1;
  $('#inputName').val(txt);

  //Point1
  //here I post the i, txt, status to the server

});

效果很好。现在我添加了一个 radio 输入

<div class="form-group">
  <div class="col-lg-4 >
    <div class="radio">
        <label> <input type="radio" name="status" value="1" required> 1</label>
        <label> <input type="radio" name="status" value="2" required> 2 </label>  
        <label> <input type="radio" name="status" value="3" required> 3 </label>  
    </div>
  </div>
</div> 

并且我想在用户单击单选按钮时发送 status 的值(而不是 status=1)。我在//point1 添加了这个:

$("input:radio[name=status]").click(function() {
    status = $(this).val(); 
});

但它不起作用..

Answer 1

您应该使用:checked selector要获取选中的 checkbox 元素的值，还可以使用 change 事件

$("input:radio[name=status]").change(function() {
    status = $("input:radio[name=status]:checked").val(); 
});

$("input:radio[name=status]").click(function() {
  var status = $("input:radio[name=status]:checked").val();
  snippet.log(status)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="form-group">
  <div class="col-lg-4">
    <div class="radio">
      <label>
        <input type="radio" name="status" value="1" required>1</label>
      <label>
        <input type="radio" name="status" value="2" required>2</label>
      <label>
        <input type="radio" name="status" value="3" required>3</label>
    </div>
  </div>
</div>