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

Question

I want to use JQuery on my Coldfusion application for showing/hiding div elements with checkbox checked/unchecked within the div.

Basically, in a view I show multiple divs elements, every div have also more divs inside, one of these internal divs contains an input type checkbox that could come checked or unchecked.

I also have three buttons in that view 'Active, Inactive, All'. When clicking on Active I want to show all div elements with checkbox checked, not showing the unchecked, and the other way around when clicking on 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>

I´m not an expert at all with JQuery. The only thing I have done is what follows and I do not know whether if is a good beggining or not:

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

Someone please that can help me with it? Thanks a lot in advance!

Answer 1

After your CF code executes, it will generate a .card for each loop iteration of your apis array. So you jQuery code will need a click handler for the #actives button and that will loop through each() iteration of the checkboxes to determine the checked/unchecked state. At that point find the closest() ancestor .card and show() / hide() the .card depending upon the checkbox state.

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

Answer 2

Call the checkbox by its id and when it's checked, write a function to display the divs you want to display:

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

}

Answer 3

If you want to do it with jQuery code:

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

Working Fiddle

Answer 4

The code you are probably looking for is in these event handlers for your buttons:

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

I reproduced some of your ColdFusion by replacing it with JavaScript and provided a demonstration of the above event handlers in this JSFiddle .