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

Question

我想在我的 Coldfusion 应用程序中使用 JQuery showing/hiding div 元素 div.

中带有复选框 checked/unchecked

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

我在该视图中也有三个按钮 'Active, Inactive, All'。 单击“活动”时，我想显示所有选中复选框的 div 元素，不显示未选中的元素，而单击“非活动”.

时则相反

<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

通过id调用checkbox，当它被选中时，写一个函数来显示你想显示的div:

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

}

Answer 2

如果您想使用 jQuery 代码：

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

Working Fiddle

Answer 3

您的 CF 代码执行后，它将为您的 apis 数组的每个循环迭代生成一个 .card。因此，您 jQuery 代码将需要 #actives 按钮的点击处理程序，它将循环遍历复选框的 each() 迭代以确定 checked/unchecked 状态。那时根据复选框状态找到 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 4

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

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);

我通过将其替换为 JavaScript 来复制您的一些 ColdFusion，并在此 JSFiddle.

中提供了上述事件处理程序的演示

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

When click on button, show divs with checked checkbox using JQuery

html

javascript

coldfusion

jquery