更改选择填充不需要的结果

Question

我有两个输入。我不确定我做错了什么，但我只是想显示与输入选择相关的div。

我现在遇到的问题是，如果选择了输入，控制台会显示已选择两个输入。此外，标题.pg-selection-title未显示正确的数据。

为什么我的更改选择现在显示正确的数据？

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}

 $('.calendar-check').on('change', function () {
  if ($('#cal-2year:checked')) {
    $('#prev-2year').fadeBoolToggle($('#cal-2year:checked').length == 1);
    console.log('A selected');
    $('.pg-selection-title').html('A selected');
  };
  if ($('#cal-whiteboard:checked')) {
    $('#prev-whiteboard').fadeBoolToggle($('#cal-whiteboard:checked').length == 1);
    console.log('B selected');
    $('.pg-selection-title').html('B Selected');
  };
});

.cal-theme-wrap {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="calendar-check" id="cal-2year">
<input type="checkbox" class="calendar-check" id="cal-whiteboard">

<div id="prev-2year" class="cal-theme-wrap">
  <h4 class="pg-selection-title"></h4>
  <p id="calender-preview-choice"></p>
  <div id="calendar-select">
    A
  </div>
</div>
<div id="prev-whiteboard" class="cal-theme-wrap">
  <h4 class="pg-selection-title"></h4>
  <p id="calender-preview-choice"></p>
  <div id="calendar-select">
    B
  </div>
</div>

Answer 1

问题是即使是没有找到结果的jQuery选择仍会返回一个对象。所以你不能只检查是否存在 - 你必须检查length属性以确保它实际上找到了。

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}

 $('.calendar-check').on('change', function () {
  if ($('#cal-2year:checked').length > 0) {
    $('#prev-2year').fadeBoolToggle($('#cal-2year:checked').length == 1);
    console.log('A selected');
    $('.pg-selection-title').html('A selected');
  };
  if ($('#cal-whiteboard:checked').length > 0) {
    $('#prev-whiteboard').fadeBoolToggle($('#cal-whiteboard:checked').length == 1);
    console.log('B selected');
    $('.pg-selection-title').html('B Selected');
  };
});

.cal-theme-wrap {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="calendar-check" id="cal-2year">
<input type="checkbox" class="calendar-check" id="cal-whiteboard">

<div id="prev-2year" class="cal-theme-wrap">
  <h4 class="pg-selection-title"></h4>
  <p id="calender-preview-choice"></p>
  <div id="calendar-select">
    A
  </div>
</div>
<div id="prev-whiteboard" class="cal-theme-wrap">
  <h4 class="pg-selection-title"></h4>
  <p id="calender-preview-choice"></p>
  <div id="calendar-select">
    B
  </div>
</div>

Answer 2

我假设您还想在取消选中各自的复选框时重新隐藏div？无论是否选中它们，都要将布尔值传递给隐藏/显示功能。

如果两者都被选中，您可能还会重新考虑更改两者的.pg-selection-title。由于div仅在选中该复选框时才可见，因此您可能不需要动态更改文本。

＆＃13;

＆＃13;

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}

$('.calendar-check').on('change', function() {
  // hide or show divs based on whether it is checked
  $('#prev-2year').fadeBoolToggle($('#cal-2year').is(':checked'));
  $('#prev-whiteboard').fadeBoolToggle($('#cal-whiteboard').is(':checked'));
  
  if ($('#cal-2year').is(':checked')) {
    console.log('A selected');
    // $('.pg-selection-title').html('A selected');
  };
  if ($('#cal-whiteboard').is(':checked')) {
    console.log('B selected');
    // $('.pg-selection-title').html('B Selected');
  };
});

＆＃13;

.cal-theme-wrap {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="calendar-check" id="cal-2year">
<input type="checkbox" class="calendar-check" id="cal-whiteboard">

<div id="prev-2year" class="cal-theme-wrap">
  <h4 class="pg-selection-title">A Selected</h4>
  <p id="calender-preview-choice"></p>
  <div id="calendar-select">
    A
  </div>
</div>
<div id="prev-whiteboard" class="cal-theme-wrap">
  <h4 class="pg-selection-title">B Selected</h4>
  <p id="calender-preview-choice"></p>
  <div id="calendar-select">
    B
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;