选中jQuery中的复选框后显示文本

时间： 2024-11-11 admin IT培训

选中jQuery中的复选框后显示文本推荐度：
相关推荐

选中jQuery中的复选框后显示文本

我想在input中显示文本，然后在jQuery中选中一个复选框后隐藏并显示div。在我的代码中，隐藏并显示div运行良好。但是在input中显示文本不起作用。

我该如何解决？

$('#show-check').click(function() {
  if ($(this).prop('checked')) {
    $(this).parents('.check-details').find('.div-check').fadeIn('slow');
    $('#check_tick').val('checked');
  } else
    $(this).parents('.check-details').find('.div-check').fadeOut('slow');
  $('#check_tick').val('unchecked');
});

<script src=".9.1/jquery.min.js"></script>
<div class="form-group check-details">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="show-check">
    <input type="text" id="check_tick" name="check_tick">
    <label>Currency Rate</label>
  </div>
  <div class="div-check">
    <select class="curratesec" id="cur_rate" onchange="changeFunc();">
      <option class="currateopt" selected disabled>--Select Currency--</option>
      <option class="currateopt">Value 1</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" id="currency_rate" class="curratetext" placeholder="Currency Rate">
  </div>
</div>

回答如下：

您错过了else部分中的代码块。解决小提琴here

$('#show-check').click(function() {
    if ($(this).prop('checked')) {
      $(this).parents('.check-details').find('.div-check').fadeIn('slow');
      $('#check_tick').val('checked');
    } else
    {//missed
      $(this).parents('.check-details').find('.div-check').fadeOut('slow');
      $('#check_tick').val('unchecked');
    }//missed
});