javascript - 输入更改事件和输入字段的问题

Question

我有一个单选按钮、一个文本字段和一个选择字段。这是html代码:

<div class="wb-success-delivery">
 <input type="radio" name="delivery" value="0" /><span> Now)</span>
</div>
<div class="success-delivery">
  <input type="radio" name="delivery" value="2"  />
   <input type="text"  class="test" id="del_time_rang2"  value="Tomorrow" name="delivery" />
     <select id="del_time_rang" >  
      <option value="11-12pm">11-12pm</option> 
      <option value="12-1pm">12-1pm</option> 
      <option value="1-2pm">1-2pm</option>
 </select>
</div>

然后我得到了一些带有更改函数的 jQuery 代码，用于存储上面用户选择的信息。

$j(document).ready(function(){
$j("input[name='delivery']").change(function(){
  var $jtime= $j('#del_time_rang').val();
  var $jdate= $j('#del_time_rang2').val();
  var $jresult=  $jdate + ' between ' + $jtime ;

    if($j("input[name='delivery']:checked").val()==0) {
        $j("#del_time_1").val('Now');
        $j("#del_time_2").val('Now');
    } else if($j("input[name='delivery']:checked").val()==2) {
        $j("#del_time_1").val($jresult);
        $j("#del_time_2").val($jresult);
    }
});

});

现在，这适用于#del_time_rang2，但对于#del_time_rang，只有当用户首先选择正确的选项，然后单击单选按钮时，它才有效。否则，它会显示默认值(晚上 11 点至中午 12 点)。我认为这是因为更改事件是针对单选按钮输入的，但不确定如何修复它？有什么想法吗？

Answer 1

我认为您还应该将 onChange 事件附加到 select ，因此:

• 我已将 name="delivery" 添加到选择中
• 将 onChange 事件附加到 $("[name='delivery']")

请参阅以下内容:

$(document).ready(function(){
$("[name='delivery']").change(function(){
  var $jtime= $('#del_time_rang').val();
  var $jdate= $('#del_time_rang2').val();
  var $jresult=  $jdate + ' between ' + $jtime ;

    if($("input[name='delivery']:checked").val()==0) {
        $("#del_time_1").val('Now');
        $("#del_time_2").val('Now');
    } else if($("input[name='delivery']:checked").val()==2) {
        $("#del_time_1").val($jresult);
        $("#del_time_2").val($jresult);
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wb-success-delivery">
 <input type="radio" name="delivery" value="0" /><span> (Now)</span>
</div>
<div class="success-delivery">
  <input type="radio" name="delivery" value="2"  />
   <input type="text"  class="test" id="del_time_rang2"  value="Tomorrow" name="delivery" />
     <select id="del_time_rang" name="delivery" >  
      <option value="11-12pm">11-12pm</option> 
      <option value="12-1pm">12-1pm</option> 
      <option value="1-2pm">1-2pm</option>
 </select>
</div>
<input type="text" id="del_time_1">

注意:无论如何，我认为 selector 应该使用“class”属性而不是“name”属性。

希望对你有帮助，再见。