CODEWITHSUNDEEP
jqueryhtml
Ozzy
Ozzy

Reputation: 905

How to append checkbox value to an li

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

Upvotes: 0

Views: 4620

Answers (3)

Alpesh
Alpesh

Reputation: 5405

Try this- 

$('input[type="checkbox"]').click(function(){
  if($(this).is(':checked')){
     var val = $(this).val();
     $('.hidden-filters > ul').append('<li>'+val+'</li>');
  } 
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253446

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.

Upvotes: 3

hunter
hunter

Reputation: 63542

$(":checkbox").click(function(){
    $(".hidden-filters").append("<li>" + $(this).val() + "</li>");
});

Upvotes: 1

Related Questions