JQuery：根据复选框状态添加/删除 html答案

【问题标题】：JQuery: add/remove html based on checkbox stateJQuery：根据复选框状态添加/删除 html
【发布时间】：2011-06-27 21:10:02
【问题描述】：

<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 as li's：

<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 工作时，我总是觉得自己的效率很低。这也没有考虑已经设置为检查页面加载的框...

【问题讨论】：

我喜欢 rfw 下面的建议。如果您不熟悉在 jQuery 中加载页面时执行函数，请使用 $(document).ready() 方法。

标签： jquery forms append

【解决方案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);
}

【讨论】：

【解决方案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>

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

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

这也会在每个元素被分配设置列表项的初始状态后立即触发change()^(docs) 事件。

【讨论】：