从复选框 onchange 事件中获取值

Question

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

我知道要获取价值我会这样做：

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

但是我怎么只得到'activated'/'selected'的值呢？然后一旦它被 selected 并且我有了我想在它说 'Product Chosen'.

的地方显示它的值

此外，您可以在代码片段或 fiddle 中看到，当您同时单击两个框然后再次单击一个框以取消 select 它时，"Proceed" 消失了.是否还有一种方法可以在任何复选框被选中时保持显示？

$('.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

怎么样

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(", ")
                    );
  });
});

.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>
<div id="prods">Products chosen</div>
<div class="proceed-btn" id="next1">PROCEED</div>

从复选框 onchange 事件中获取值

Getting value from checkbox onchange event

javascript

css

jquery

function

onchange