從復選框 onchange 事件中獲取價值

Question

我有一個簡單的切換復選框功能，可以通過產品包來選擇它們。 我以輸入復選框的方式創建了它，以便能夠捕獲該值。 我不明白的是如何捕獲僅顯示復選框時的值。

我知道要捕捉我會這樣做的價值：

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

但是如何僅在“激活”/“選擇”時獲取該值。 然后一旦它被選中並且我有我想要在它顯示“產品選擇”的位置旁邊顯示的值。

此外，您可以在代碼段或小提琴中看到，當您單擊兩個框然后再次單擊一個框以取消選擇它時，“繼續”消失了。 是否還有一種方法可以在選中任何框時保持顯示？

這里還有一個 jsfiddle。

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