제품 패키지를 검토하여 선택하는 간단한 토글 확인란 기능이 있습니다. 값을 포착 할 수 있도록 입력 체크 박스 방식으로 생성했습니다. 내가 이해하지 못하는 것은 확인란 만 표시 될 때 값을 캡처하는 방법입니다.
나는 이것을 할 가치를 포착하는 것을 안다.
$('#package2').val();
그러나 '활성화'/ '선택'되었을 때만 값을 얻는 방법은 무엇입니까? 그런 다음 선택되고 '선택된 제품'이라는 위치 옆에 표시하려는 값이 있습니다.
또한 스 니펫이나 바이올린에서 두 상자를 모두 클릭 한 다음 상자를 다시 클릭하여 선택을 취소하면 "진행"이 사라진다는 것을 알 수 있습니다. 체크 박스를 선택할 때마다 계속 표시 할 수있는 방법도 있습니까?
$('.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>어때
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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다