JQuery: add/remove html based on checkbox state

Question

<ul id="list">

</ul>
<input type="checkbox" id="item1" name="item one" />
<input type="checkbox" id="item2" name="item two" />
<input type="checkbox" id="item3" name="item three" />
<input type="checkbox" id="item4" name="item four" />

I need to add checked items to the #list as li's in this format:

<li class="CHECKBOX ID">CHECKBOX NAME</li>

Here's what I'm currently working on:

$('input[type=checkbox]').change(function () {

if($(this).is(':checked')){
var checkboxId = $(this).attr('id');
var checkboxName = $(this).attr('name');

$('#list').append('<li class="' + checkboxId  + '">' + checkboxName  + '</li>');
} else {
$('#list .' + checkboxId).remove();
}

When ever I work with javascript I always feel like I'm very inefficient. This also doesn't take into account boxes already set to check on page load...

I like rfw's suggestion below. In case you aren't familiar with executing a function when the page loads in jQuery, use the $(document).ready() method. — Shaun
– Shaun, Commented Feb 15, 2011 at 20:00

ReactiveRaven · Accepted Answer · 2011-02-15 20:06:52Z

4

What you should do is make a function, e.g. toggleListCheckbox and call that when the page loads and also on the event.

function toggleListCheckbox() {
    if($(this).is(':checked')) {
        var checkboxId = $(this).attr('id');
        var checkboxName = $(this).attr('name');
        $('#list').append('<li class="' + checkboxId  + '">' + checkboxName  + '</li>');
    } else {
        $('#list .' + checkboxId).remove();
    }
}

$(document).ready(function () {
    $('input[type=checkbox]').each(toggleListCheckbox).change(toggleListCheckbox);
}

edited Feb 15, 2011 at 20:06

ReactiveRaven

7,6492 gold badges31 silver badges39 bronze badges

answered Feb 15, 2011 at 19:53

user193476

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2011-02-15 20:12:25Z

I'd have them on the page from the beginning, and then just show/hide them using the filter()^(docs) method with this.id and the toggle()^(docs) method with this.checked, while placing the most recently clicked one at the bottom of the list using the appendTo()^(docs) method.

Example: http://jsfiddle.net/NBQpM/3/

html

<ul id="list">
    <li class="item1">item one</li>
    <li class="item2">item two</li>
    <li class="item3">item three</li>
    <li class="item4">item four</li>
</ul>

js

var listItems = $('#list li'); 

$('input[type=checkbox]').change(function() {
    listItems.filter('.' + this.id).appendTo('#list').toggle(this.checked);
}).change();

This also triggers the change()^(docs) event on each element immediately after they've been assigned to set the initial state of the list items.

Collectives™ on Stack Overflow

JQuery: add/remove html based on checkbox state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related