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：

<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

我从头开始在页面上显示它们，然后使用this.id方法和this.checked方法显示/隐藏它们，filter()^(docs)方法显示/隐藏它们<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> ，使用toggle()^(docs)方法将最近点击的一个放在列表底部。

示例： appendTo()^(docs)

html

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

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

JS

{{1}}

这也会在分配每个元素后立即触发http://jsfiddle.net/NBQpM/3/事件，以设置列表项的初始状态。

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

2 个答案: