JQuery: добавление/удаление HTML на основе CheckBox состояния

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

Мне нужно, чтобы добавить выбранные элементы в #list, как Ли в этом формате:

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

Вот что я в настоящее время работает над:

$('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(); 
} 

Когда я работаю с javascript, я всегда чувствую себя очень неэффективным. Это также не учитывает ящики, уже установленные для проверки загрузки страницы ...

Answer 1

Что вам нужно сделать, это сделать функцию, например. toggleListCheckbox и назовите это, когда страница загружается, а также на событие.

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

Answer 2

Я бы их на странице с самого начала, а затем просто показать/скрыть их с помощью filter()^(docs) метода с this.id и toggle()^(docs) метода с this.checked, при размещении наиболее недавно нажал одну в нижней части список с использованием метода appendTo()^(docs).

Пример: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(); 

Это также вызывает change()^(docs) событие для каждого элемента сразу после того, как они были для установки начального состояния элементов списка.