从复选框onchange事件

Question

我有一个简单的切换复选框功能，可以通过产品包来选择它们。我以输入复选框的方式创建了这个，以便能够捕获值。我不明白的是如何仅在显示复选框时捕获值。

我知道要抓住我会这样做的价值：

$('#package2').val();

但是，如何在“激活”/“选中”时获取该值。然后一旦它被选中并且我有值，我想在它显示“Product Chosen”的旁边显示它。

此外，您可以在片段或小提琴中看到，当您单击这两个框然后再次单击一个框以取消选择时，“继续”将消失。是否有办法在检查任何方框时保持显示？

Here is a jsfiddle as well.

$('.calendar-check').on('change', function() {
      if ($(this).prop('checked')) {
        $(this).parents('.product-wrap:first').find('.checkmark-img').show('200');
        $('#next1').show();
      } else {
        $(this).parents('.product-wrap:first').find('.checkmark-img').hide('200');
        $('#next1').hide();
      }
});

.package-img {
    width: 60%;
    height: auto;
    margin-left: 20%;
    cursor: pointer;
    transition:1s; -webkit-transition:1s;
    position: relative;
}
#calendar-wrap, #tp-wrap {
    width: 100%;
    position: relative;
}
.checkmark-img {
    display: none;
    width: 40%;
    height: auto;
    z-index: 1;
    cursor: pointer;
}
.proceed-btn {
    display: none;
    transition:.5s; -webkit-transition:.5s;
}
.calendar-check {
  display: none;
}

.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-container">
  <div id="calendar-wrap" class="product-wrap">
    <h2 class="product-titles">Package 1</h2>
    <label for="package1" class="package-check-toggle">
      <img src="images/calendar-package.png" alt="Package 1" class="package-img" id="calendar-img">
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="package1" value="Photo Gift">
  </div>
</div>
<div class="right-container">
  <div id="tp-wrap" class="product-wrap">
    <h2 class="product-titles">Package 2</h2>
    <label for="package2" class="package-check-toggle">
      <img src="images/tp-package.png" alt="Package 2" class="package-img" id="tp-img">
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="package2" value="Touch Points">
  </div>
</div>
Product chosen
<div class="proceed-btn" id="next1">PROCEED</div>

Answer 1

怎么样

＆＃13;

＆＃13;

jQuery.fn.fadeBoolToggle = function(bool){
  return bool ? this.fadeIn(1000) : this.fadeOut(1000);
}
$(function() {
  $('.calendar-check').on('click', function() {
    $(this).parents('.product-wrap:first').find('.checkmark-img').toggle(this.checked);
//        $('#next1').toggle($('.calendar-check:checked').length > 0);
    $('#next1').fadeBoolToggle($('.calendar-check:checked').length > 0);
    var prods = [];
    $('.calendar-check:checked').each(function() { prods.push($(this).val()) });
    $("#prods").html("Product"+
                     (prods.length==1?"":"s")+
                     " chosen: "+prods.join(", ")
                    );
  });
});

＆＃13;

.package-img {
  width: 60%;
  height: auto;
  margin-left: 20%;
  cursor: pointer;
  transition: 1s;
  -webkit-transition: 1s;
  position: relative;
}
#calendar-wrap,
#tp-wrap {
  width: 100%;
  position: relative;
}
.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 1;
  cursor: pointer;
}
.proceed-btn {
  display: none;
//*  transition: .5s;
  -webkit-transition: .5s;*/
}
.calendar-check {
  display: none;
}
.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-container">
  <div id="calendar-wrap" class="product-wrap">
    <h2 class="product-titles">Package 1</h2>
    <label for="package1" class="package-check-toggle">
      <img src="images/calendar-package.png" alt="Package 1" class="package-img" id="calendar-img">
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="package1" value="Photo Gift">
  </div>
</div>
<div class="right-container">
  <div id="tp-wrap" class="product-wrap">
    <h2 class="product-titles">Package 2</h2>
    <label for="package2" class="package-check-toggle">
      <img src="images/tp-package.png" alt="Package 2" class="package-img" id="tp-img">
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="package2" value="Touch Points">
  </div>
</div>
<div id="prods">Products chosen</div>
<div class="proceed-btn" id="next1">PROCEED</div>

＆＃13;

＆＃13;

＆＃13;