Получение значения из checkbox onchange event

Question

У меня есть простая функция переключения, которая включает пакеты продуктов для их выбора. Я создал это во флажке ввода, чтобы иметь возможность фиксировать значение. Я не понимаю, как зафиксировать значение, когда отображается только флажок.

Я знаю, чтобы захватить значение, я бы это сделать:

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

Но как я получаю только значение, когда оно «активировано»/«выбрано». Затем, когда он выбран, и у меня есть значение, которое я хочу отобразить рядом с тем, где он говорит «Выбранный продукт».

Кроме того, вы можете видеть в фрагменте или скрипке, что, когда вы нажимаете на оба окна, а затем снова щелкните поле, чтобы отменить его, чтобы исчезнуть «Продолжить». Есть ли способ сохранить этот показ, когда будут проверяться какие-либо из ящиков?

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

Как насчет

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>