Question

我创建了一个函数fadeBoolToggle，它根据布尔值淡入和淡出。

我添加了代码，使我的复选框就像单选按钮一样。然后我创建了一个变量来将限制设置为1 limitCal（我的实际代码需要复选框，因此无法使用无线电输入）。这很好。

什么不起作用是我无法弄清楚当不再选择输入时如何让我的图像不显示。

有人看到我做错了吗？

jQuery.fn.fadeBoolToggle = function (bool) {
        return bool ? this.fadeIn(400) : this.fadeOut(400);
    }
var limitCal = 1;
$('.calendar-check').on('change', function() {
  $('.calendar-check').prop('checked', false);
  $(this).prop('checked', true);
  if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
    $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
  }
});

.checkmark-img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-2year" class="package-check-toggle">
      <h4 class="calendar-box-title">A</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-2year">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-whiteboard" class="package-check-toggle">
       <h4 class="calendar-box-title">B</h4>
       <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-whiteboard">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-glance" class="package-check-toggle">
      <h4 class="calendar-box-title">C</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-glance">
  </div>
</div>

Answer 1

我稍微修改了你的代码。检查一下它是否合适。

您是否希望取消选中选中的复选框？

＆＃13;

$('.calendar-check').on('change', function(){
  $('.calendar-check').parent().find('img').fadeOut();
  $('.calendar-check').not(this).prop('checked', false);
  $('.calendar-check:checked').parent().find('img').fadeIn();
});

＆＃13;

.checkmark-img {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-2year" class="package-check-toggle">
      <h4 class="calendar-box-title">A</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-2year">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-whiteboard" class="package-check-toggle">
       <h4 class="calendar-box-title">B</h4>
       <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-whiteboard">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-glance" class="package-check-toggle">
      <h4 class="calendar-box-title">C</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-glance">
  </div>
</div>

＆＃13;

Answer 2

您当前的代码只会在刚刚选中的复选框的相应图片上调用.fadeBoolToggle()。此时this.checked为true，因此当前图片会根据需要淡入。但是你没有代码可以从之前选中的框中淡出图像。

这是一种方法，一路上简化你的代码（注意你不需要你的.fadeBoolToggle()代码，因为它的参数总是硬编码所以你可以使用.fadeOut()和.fadeIn()，但我已经离开了你的职能部门）：

jQuery.fn.fadeBoolToggle = function (bool) {
        return bool ? this.fadeIn(400) : this.fadeOut(400);
    }
var limitCal = 1;
$('.calendar-check').on('change', function() {
  $('.calendar-check').not(this) // select the *other* checkboxes
    .prop('checked', false)      // uncheck them
    .closest('.product-wrap')    // select their wrappers
    .find('.checkmark-img')      // find their images
    .fadeBoolToggle(false);      // fade them out
  this.checked = true;           // check current checkbox
  $(this).closest('.product-wrap') // get current one's wrapper
    .find('.checkmark-img')      // find current image
    .fadeBoolToggle(true);       // fade it in
});

.checkmark-img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-2year" class="package-check-toggle">
      <h4 class="calendar-box-title">A</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-2year">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-whiteboard" class="package-check-toggle">
       <h4 class="calendar-box-title">B</h4>
       <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-whiteboard">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-glance" class="package-check-toggle">
      <h4 class="calendar-box-title">C</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-glance">
  </div>
</div>

我假设您不希望取消选中所有复选框（因此它们的行为类似于无线电）。

根据复选框显示图像：选中

2 个答案: