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

});

工作正常。现在我添加了一个无线电输入

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

Answer 2

您的点击处理程序是正确的，它将为您提供单击的单选按钮的值。处理程序代码执行时，DOM可能没有准备好。要确保DOM已准备就绪，请将脚本放在$(function(){..});或$(document).ready(function(){....});

中

注意 - <div class="col-lg-4 >的标记不正确，在类值后加上引号。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-lg-4" ><!-- correct html by puttin quotes after class value-->
    <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>

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

2 个答案: