チェックボックスのonchangeイベントからの価値の取得

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>