Wert von Checkbox onchange Ereignis erhalten

Question

Ich habe eine einfache Toggle-Checkbox-Funktion, die über Produktpakete geht, um sie auszuwählen. Ich habe dies in einer Eingabe-Checkbox erstellt, um den Wert erfassen zu können. Was ich nicht verstehe, ist, wie man den Wert erfasst, wenn nur das Kontrollkästchen angezeigt wird.

Ich weiß um den Wert zu erfassen ich dies tun würde:

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

Aber wie ich nur den Wert erhalten, wenn es ‚aktiviert‘/‚ausgewählt‘ wird. Dann, wenn es einmal ausgewählt ist und ich den Wert habe, möchte ich es neben dem Produkt 'Produkt gewählt' anzeigen.

Auch können Sie in dem Schnipsel oder Geige sehen, dass, wenn Sie auf beide Felder klicken und dann erneut auf ein Feld klicken, um die Auswahl aufzuheben, dass das "Fortfahren" weggeht. Gibt es auch eine Möglichkeit, diese Anzeige zu behalten, wenn eine der Boxen überprüft wird?

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

Wie wäre es

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>