JQuery: добавить / удалить HTML на основе состояния флажка - PullRequest
Новая
       12

JQuery: добавить / удалить HTML на основе состояния флажка

1 голос
/ 15 февраля 2011 
<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 в этом формате: 

<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, я всегда чувствую, что я очень неэффективен. Это также не учитывает поля, уже установленные для проверки загрузки страницы ...

Ответы [ 2 ]

4 голосов
/ 15 февраля 2011

Что вам нужно сделать, это создать функцию, например 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);
}
0 голосов
/ 15 февраля 2011

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

Пример: 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() (документы) событие для каждого элемента сразу после того, как они были назначены для установки начального состояния элементов списка.

...