JQuery的：添加/刪除HTML基於複選框狀態

<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李的：JQuery的：添加/刪除HTML基於複選框狀態

<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工作時，總覺得自己效率很低。這也沒有考慮到已經設置爲檢查頁面加載的框...

來源

2011-02-15 dhornbein

我喜歡rfw的建議。如果在jQuery中加載頁面時不熟悉執行函數，請使用$（document）.ready（）方法。 – Shaun 2011-02-15 20:00:11

你應該做的是做一個功能，例如， 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); 
}

來源

2011-02-15 19:53:25 rfw

我讓他們從一開始就在頁面上，然後只顯示/使用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)事件他們已經後立即分配給設置列表項目的初始狀態。

來源

2011-02-15 19:55:29 user113716

JQuery的：添加/刪除HTML基於複選框狀態

回答

相關問題