单击按钮时，使用 JQuery 显示带有选中复选框的 div

Question

我想在我的 Coldfusion 应用程序上使用 JQuery 来显示/隐藏 div 元素，并在 div 中选中/取消选中复选框。

基本上，在我显示多个 div 元素的视图中，每个 div 内部还有更多 div，其中一个内部 div 包含一个输入类型复选框，可以选中或取消选中。

我在该视图中还有三个按钮“活动、非活动、全部”。 点击 Active 时，我想显示所有选中复选框的 div 元素，不显示未选中的，反之，当点击 Inactive 时。

<div class="btn-group ">
  <button id="actives" type="button">Actives</button>
  <button id="inactives" type="button">Inactives</button>
  <button id="all" type="button">All</button>
</div>

<div id="apiDiv">
  <cfloop array="#apis#" index="api">
    <div class="card card-found">
      <div class="card-header">
        <cfif Len(api.iconClass)>
          <i class="fa fa-fw #api.iconClass#"></i>
        </cfif>
        #structKeyExists( api, "name" ) ? api.name : api.id#
      </div>
      <div class="card-body">
        <p>#api.description#</p>
      </div>
      <div class="card-button">
        <input class="#inputClass# ace ace-switch ace-switch-3" name="#inputName#" id="#inputId#-#api.id#" type="checkbox"  value="#HtmlEditFormat( api.id )#"<cfif ListFindNoCase( value, api.id )> checked="checked"</cfif> tabindex="#getNextTabIndex()#">
        <span class="lbl"></span>
      </div>
    </div>
  </cfloop>
</div>

我根本不是 JQuery 方面的专家。我唯一做的就是下面的事情，我不知道是否是一个好的开始：

$("#actives").click(function (e) {
  $("#apiDiv .card").filter(function() {
    <!--- code here --->
  });
});

有人可以帮我吗？提前非常感谢！

Answer 1

在您的 CF 代码执行后，它将为您的 apis 数组的每个循环迭代生成一个 .card。因此，您的 jQuery 代码将需要 #actives 按钮的单击处理程序，它将循环通过复选框的 each() 迭代以确定选中/未选中状态。此时，根据复选框状态找到closest() 祖先.card 和show()/hide() .card。

$("#actives").click(function (e) {
    $('input[type=checkbox]').each(function() {
        if (this.checked) {
            $(this).closest(".card").show();
        } else {
            $(this).closest(".card").hide();
        }
    });
});

Answer 2

如果你想用 jQuery 代码来做：

$('#actives').click(function(){
        $('#apiDiv').show();
  });

Working Fiddle

Answer 3

您可能正在寻找的代码在您的按钮的这些事件处理程序中：

function activesHandler() {
  jQuery(".card-button > input:checked").parents(".card.card-found").show();
  jQuery(".card-button > input:not(:checked)").parents(".card.card-found").hide();
}

function inactivesHandler() {
  jQuery(".card-button > input:checked").parents(".card.card-found").hide();
  jQuery(".card-button > input:not(:checked)").parents(".card.card-found").show();
}

function allHandler() {
  jQuery(".card.card-found").show();
}

jQuery("#actives").click(activesHandler);
jQuery("#inactives").click(inactivesHandler);
jQuery("#all").click(allHandler);

我复制了您的一些 ColdFusion，将其替换为 JavaScript，并在 JSFiddle 中提供了上述事件处理程序的演示。

Answer 4

通过它的 id 调用复选框，当它被选中时，编写一个函数来显示你想要显示的 div：

<input type="checkbox" id="check">
$document.getElementById("check").onclick = function(){
    $document.getElementById("div_name").style.display="block";   // block displays the div.

}