Toggle element with checkbox with certain attribute

Question

So I have this list of child pages sorted by title. And I am using custom fields wordpress plugin.

This is one of the lines in content of that li element

<p>City: <?php the_field('city',$page->ID); ?></p>

I want to make checkbox (somewhere on the page) so that if you uncheck that check box, element with, lets say city=NewYork, will disappear.

Code so far:

                        <input type="checkbox" class="newyork" name="beograd" checked>Chicago<br>
                        <input type="checkbox" class="cicago" name="Chicago" checked>Pancevo<br>

                        <?php
                    $mypages = get_pages( array( 'child_of' => $post->ID, 'meta_value' => '', 'sort_column' => 'city', 'sort_order' => 'asc' ) );

                    foreach( $mypages as $page ) {      
                        $content = $page->post_content;
                        if ( ! $content ) 

                        $content = apply_filters( 'the_content', $content );
                    ?>

                        <li class="clan">
                            <a class="noselect"><?php the_field('naziv',$page->ID); ?></a>

                            <div class="clan_content">
                                    <div class="podaci">

                                        <p>City: <?php the_field('city',$page->ID); ?></p>

                            </div>
                        </li>



                    <?php
                    }   
                ?>

SUCCESS

added <li class="clan" title="<?php the_field('city',$page->ID); ?>">

And then

$(function () {
                                  $('#newyork').change(function () {            
                                     $(".clan_content").stop().slideUp();                                     
                                     $("[title=NewYork]").toggle(this.checked);
                                  }).change(); 
                                });

Answer 1

If you have access to jQuery something like this may work. And it could be expanded to have the key and value set as attributes, so it isn't so hard coded.

 $(function(){ // Listen for a filter click $('.stateFilter').click(function(){ var ref = $(this), // The input state = ref.attr('state'), // The state I want to filter states = $('div.state[state='+state+']'); // What I should filter if (ref.is(':checked')) { // If checked, show, otherwise hide states.show(); } else { states.hide(); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="state" state="newYork">New York</div> <div class="state" state="newYork">Pittsford</div> <div class="state" state="newYork">Rye</div> <div class="state" state="alabama">Birmingham</div> <div class="state" state="alabama">Montgomery</div> <div class="state" state="alabama">Auburn</div> <hr/> <!-- Create Filters for Each Key you want to filter on, here I added a state attribute to the input tags, which I can reference from jQuery --> <p> <input class="stateFilter" type="checkbox" state="newYork" label="check_newYork" checked/> <label for="check_newYork">Show <b>New York</b> Cities</label> </p> <p> <input class="stateFilter" type="checkbox" state="alabama" label="check_alabama" checked/> <label for="check_alabama">Show <b>Alabama</b> Cities</label> </p> 

I took another stab with the latest info. I converted the php into what the html should be, but i'm not sure if it achieves everything. And I needed to add more attributes to simplify everything.

 $(function(){ // Auto-Generate checkboxes and sort them, via jQuery magic var cities = [], cityMap = {}, i, city, clan_filters = $('#clan_filters'), p, items; // Collect cities, eliminate duplicates $('#clans li.clan').each(function(){ var ref = $(this), city = ref.attr('city'); // Make sure we don't duplicate the cities by using maps if (!cityMap[city]) { // If I haven't see this city, update the make and list cityMap[city] = true; cities.push(city); } }); // Clean out the map, not needed cityMap = undefined; // Build the checkboxes for (i = 0; i < cities.length; i++) { city = cities[i]; p = $('<p></p>').appendTo(clan_filters); p.append($('<input type="checkbox" class="clan_filter" checked/>').attr('value', city)); p.append($('<span></span>').text(city)); } // Get this reference to save time items = $('p', clan_filters); // Sort the chjeckboxes items.sort(function(a,b){ var keyA = $(a).text(); var keyB = $(b).text(); if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }); // Re-attached the sorted items, but this time in order $.each(items, function(i, li){ clan_filters.append($(li)); }); // Event Handlers $('input.clan_filter[type=checkbox]', clan_filters).change(function(){ var ref = $(this), // The input checked = ref.prop('checked'), // Am i checked? city = ref.val(); // What city is this for? $('#clans li.clan[city='+city+']').toggle(checked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="clan_filters"> </div> <!-- Commenting out code since this needs to be html <ul id="clans"> <?php $mypages = get_pages( array( 'child_of' => $post->ID, 'meta_value' => '', 'sort_column' => 'city', 'sort_order' => 'asc' ) ); foreach( $mypages as $page ) { $content = $page->post_content; if ( ! $content ) $content = apply_filters( 'the_content', $content ); ?> <li class="clan" city="<?php the_field('city',$page->ID); ?>"> <a class="noselect"><?php the_field('naziv',$page->ID); ?></a> <div class="clan_content"> <div class="podaci"> <p>City: <?php the_field('city',$page->ID); ?></p> </div> </div> </li> <?php } ?> </ul> --> <!-- This is what I think the output should look like --> <ul id="clans"> <li class="clan" city="Pancevo"> <a class="noselect">What is this? B</a> <div class="clan_content"> <div class="podaci"> <p>City: Pancevo</p> </div> </div> </li> <li class="clan" city="Chicago"> <a class="noselect">What is this? A</a> <div class="clan_content"> <div class="podaci"> <p>City: Chicago</p> </div> </div> </li> <ul> 

Answer 2

You should be able to do that with jQuery

$('checkbox').click(function () {
    if(!$(this).is(':checked')) {
        $('[city="New York"]').hide();
    }
});