jQuery。仅在检查表单框时显示DIV答案

【问题标题】：jQuery. Showing div only if form boxes are checkedjQuery。仅在检查表单框时显示DIV
【发布时间】：2014-07-10 20:11:20
【问题描述】：

我需要在开始时隐藏一个 div，然后在选中两个复选框后淡入。这是我到目前为止所拥有的（基于此处的另一个问题）：

<input type="checkbox" name="terms" id="terms" />
<input type="checkbox" name="age" id="age" />

<div id="lists">
   <!-- my div content goes in here -->
</div>



  $("#lists").hide();

  $("#terms" && "#age").click(function(){
    $("#lists").fadeToggle();
  });

我无法让它工作。显然，我可以让它与一个复选框一起工作，但我只需要在选中两个复选框时它才会淡入。我还在学习 jQuery，如果这是一个简单的解决方案，请原谅我。

【问题讨论】：

标签： jquery html

【解决方案1】：

你应该使用类似的东西：

$("#terms, #age").change(function(){
    var checked = $("#terms").prop('checked') && $("#age").prop('checked');
    $("#lists")[checked ? 'fadeIn' : 'fadeOut']();
});

【讨论】：

+1，很好的解决方案。如果未选中复选框，则回答问题并处理。
轰隆隆！那行得通。我学到了一些东西。谢谢大家的帮助。

【解决方案2】：

<input type="checkbox" name="terms" id="terms" class="mycheck"/>
<input type="checkbox" name="age" id="age" class="mycheck"/>

<div id="lists">
 <!-- my div content goes in here -->
</div>



$("#lists").hide();

$(".mycheck").on("change",function(){
   if($("#terms").prop('checked') && $("#age").prop('checked')){
       $("#lists").show();
     } 
 });

【讨论】：

如果你打算使用 show，让我给你一些建议：$("#lists").toggle($("#terms").prop('checked') && $("#age").prop('checked'));

【解决方案3】：

据我所知，jquery 不提供使用 && 的多个选择器。他们目前通过用逗号分隔选择器来执行多个选择器。您可以通过Jquery Documentation 看到这是如何完成的。另一件需要注意的事情是，即使您对提供的代码进行了更正，当您单击一个复选框时，您也会看到预期的行为，但如果您单击另一个复选框，它将隐藏 #lists div 元素。

【讨论】：