Question

Hey guys, so I would like you to help with an issue that I’m having, pretty much what i need is when the checkbox is clicked to append the checkbox value to an li element in a different div. Check the html below. Thanks in advance.

<div class="heading">
    <p><a href="#">Experiences</a></p>
    <a href="#" target="_self">modify</a>                
</div><!--heading-->
<div class="add-filters">
    <div class="inner">
        <h4 class="title-filtery">Filtery By:</h4>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td><input type="checkbox" id="adventure" name="adventure" /> <label for="adventure">Adventure</label></td>
                <td><input type="checkbox" id="diving" name="diving" /> <label for="diving">Diving</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="beach" name="beach" /> <label for="beach">Beach</label></td>
                <td><input type="checkbox" id="ecotour" name="ecotour" /> <label for="ecotour">Eco-Tour</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="boating" name="boating" /> <label for="boating">Boating</label></td>
                <td><input type="checkbox" id="family" name="family" /> <label for="family">Family</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="canoe" name="canoe" /> <label for="canoe">Canoe/Kayak/Raft</label></td>
                <td></td>
            </tr>
        </table>
        <div class="btn-holder clearfix">
            <input type="button" class="btn-cancel" value="" />
            <input type="button" class="btn-update" value="" />
        </div>
    </div>
</div><!-- filters -->
<div class="hidden-filters">
    <p>Filtering by:</p>
    <ul>

    </ul>
</div><!-- hidden-filters -->

Answer 1

One way of doing this, but note I’ve not covered how to remove the inserted li elements from the list when/if they’re unchecked (See after the hr):

$(document).ready(
    function(){
        $('input:checkbox').change(
            function(){
                if ($(this).is(':checked')) {
                 $('<li />').appendTo('#div ul').text($(this).val());   
                }
            }); 
    });

Demo at JS Fiddle.

---

Edited to offer a removal facility, if the checkbox is unchecked:

$(document).ready(
    function(){
        $('input:checkbox').change(
            function(){
                if ($(this).is(':checked')) {
                 $('<li />').appendTo('#div ul').text($(this).val());   
                }
                else {
                    $('#div li:contains('+$(this).val()+')').remove();
                }
            }); 
    });

Demo at JS Fiddle.