检查复选框是否已选中/为真，然后显示div

Question

我不确定自己做错了什么（请参见下面的代码段）。 我只是想显示一个div（如果选中了关联的复选框）。 我已经尝试过is和prop方法，但是似乎都没有用。

有人看到我在做什么错吗？

小提琴

 if ($('#package1').prop("checked")) { $('#pg-selection').show(); } if ($('#package2').is(":checked")) { $('#tp-selection').show(); } 

 .package-setup { display: none; } 

 <input type="checkbox" class="product-check" id="package1" value=""> <input type="checkbox" class="product-check" id="package2" value=""> <div class="package-setup-section"> Section 2 <div id="pg-selection" class="package-setup">Package 1</div> <div id="tp-selection" class="package-setup">Package 2</div> </div> 

Answer 1

您需要的是复选框上的onchange事件，因为如果您不放它，则您的代码最初将仅执行一次，因此，由于最初未选中该复选框，因此不会成功。

 $('#package1').on('change', function() { if ($('#package1').prop("checked") ) { $('#pg-selection').show(); } else { $('#pg-selection').hide(); } }) $('#package2').on('change', function() { if ($('#package2').prop("checked") ) { $('#tp-selection').show(); } else { $('#tp-selection').hide() } }) 

 .package-setup { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="product-check" id="package1" value=""> <input type="checkbox" class="product-check" id="package2" value=""> <div class="package-setup-section"> Section 2 <div id="pg-selection" class="package-setup">Package 1</div> <div id="tp-selection" class="package-setup">Package 2</div> </div> 

Answer 2

您必须将条件放入change()事件中，例如：

$('#package1, #package2').on('change', function(){
    //Your code here
})

注意：您应该添加else语句以在uncheck情况下隐藏div。

希望这可以帮助。

 $('#package1, #package2').on('change', function(){ if ($('#package1').prop("checked")) { $('#pg-selection').show(); }else{ $('#pg-selection').hide(); } if ($('#package2').is(":checked")) { $('#tp-selection').show(); }else{ $('#tp-selection').hide(); } }) 

 .package-setup { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="product-check" id="package1" value=""> <input type="checkbox" class="product-check" id="package2" value=""> <div class="package-setup-section"> Section 2 <div id="pg-selection" class="package-setup">Package 1</div> <div id="tp-selection" class="package-setup">Package 2</div> </div> 

您还可以使用jQuery函数.toggle() ：

 $('#package1, #package2').on('change', function(){ $('#tp-selection').toggle( $('#package1').is(":checked") ); $('#pg-selection').toggle( $('#package2').is(":checked") ); }) 

 .package-setup { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="product-check" id="package1" value=""> <input type="checkbox" class="product-check" id="package2" value=""> <div class="package-setup-section"> Section 2 <div id="pg-selection" class="package-setup">Package 1</div> <div id="tp-selection" class="package-setup">Package 2</div> </div> 

Answer 3

只需绑定一个on change事件。

 <!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script> function CheckVisibility(){ if ($('#package1').prop("checked")) { $('#pg-selection').show(); } else { $('#pg-selection').hide(); } if ($('#package2').is(":checked")) { $('#tp-selection').show(); } else { $('#tp-selection').hide(); } } </script> <style> .package-setup { display: none; } </style> </head> <body> <input type="checkbox" class="product-check" id="package1" onchange="CheckVisibility()" value=""> <input type="checkbox" class="product-check" id="package2" onchange="CheckVisibility()" value=""> <div class="package-setup-section"> Section 2 <div id="pg-selection" class="package-setup">Package 1</div> <div id="tp-selection" class="package-setup">Package 2</div> </div> </body> </html> 

Answer 4

听起来好像要在选中该框时显示div。 那正确吗？ 您需要为change事件添加一个处理程序。

$('#package1').on('change', function(e){
  if ($('#package1').prop("checked")) {
    $('#pg-selection').show();
  }
});
$('#package2').on('change', function(e){
  if ($('#package2').prop("checked")) {
    $('#tp-selection').show();
  }
});

Answer 5

好吧，您需要一些事件来确定复选框的实际更改时间。 该页面不会不断根据DOM重新评估您的JS-也就是说，请使用change事件：

（并使用data-*属性使代码更通用）

<input type="checkbox" data-target="#pg-selection" class="product-check" id="package1" value="">
<input type="checkbox" data-target="#tp-selection" class="product-check" id="package2" value="">

JS：

$(".product-check").change(function() {
    $($(this).data("target")).toggle(this.checked);
});

演示： https : //jsfiddle.net/a5wh7ogc/1/