我有很长的复选框列表，其中的特定标签看起来像这样：
<input type='checkbox' name='check[]' id='159' value='159' />
<label for='159'>Person 1</label>
<input type='checkbox' name='check[]' id='160' value='160' />
<label for='160'>Person 2</label>
在这个表格下面我有六个div就像这样：
<div id="member1"></div>
<div id="member2"></div>
<div id="member3"></div>
<div id="member4"></div>
<div id="member5"></div>
<div id="member6"></div>
我有这个JS功能，所以当我点击一个复选框时，它的标签会被插入到第一个div中。这是它的样子：
$(function(){
$('input:checkbox').click(function(){
var id = $(this).attr('id');
if($(this).is(':checked')){
$('#member1').text($('label[for="'+ id +'"]').text());
}
else{
$('#member1').text('');
}
});
});
所以一个问题是当前函数必须指定将其放入哪个div（＃member1）。它应该工作，当第一个div是“满”时，下一个复选框将其标签插入第二个div，当那个完整时，第三个复选框将其标签插入第三个div等。
另一个问题是，如果取消选中复选框，则应从其div中删除其标签，并且其下方div中的标签应向上移动。任何人都知道这是否可能？我会接受任何问题的帮助！
答案 0 :(得分：2)
警告：我会完全不同地做到这一点。
但使用您当前的结构：Live copy | source（使用有效id s）
$(function(){
$('input:checkbox').click(function(){
var $cb = $(this),
id = this.id, // No need for `attr`
member,
prev;
if(this.checked){ // No need for `attr`
$("div[id^=member]").each(function() {
if (!this.firstChild) {
// It's empty, use it
$(this).text($('label[for="'+ id +'"]').text()).attr("data-contents", id);
return false; // Done
}
});
}
else {
member = $('div[data-contents="' + id + '"]');
if (member[0]) {
member.empty().removeAttr('data-contents');
prev = member[0];
member.nextAll().each(function() {
if (!this.firstChild) {
return false; // Done
}
prev.appendChild(this.firstChild);
prev = this;
});
}
}
});
});
我会做出最小的改变：
#memberX div放入容器中，这样我们就不必进行id^=搜索。id div上使用#memberX值。#member div。这将显着简化代码。HTML：
只需将#membersX div替换为<div id="members"></div>"。
JavaScript的：
$(function(){
$('input:checkbox').click(function(){
var $cb = $(this),
id = this.id; // No need for `attr`
if(this.checked){ // No need for `attr`
$("<div>")
.text($('label[for="'+ id +'"]').text())
.attr("data-contents", id)
.appendTo("#members");
}
else {
$('div[data-contents="' + id + '"]').remove();
}
});
});
您可以通过移动复选框输入 label来简化更多操作（这也意味着您可以取消for属性）：Live copy | source
HTML：
<label><input type='checkbox' name='check[]' id="x159" value='159' />
Person 1</label>
<label><input type='checkbox' name='check[]' id="x160" value='160' />
Person 2</label>
<div id="members"></div>
JavaScript的：
$(function(){
$('input:checkbox').click(function(){
var id = this.id; // No need for `attr`
if(this.checked){ // No need for `attr`
$("<div>")
.text($(this.parentNode).text())
.attr("data-contents", id)
.appendTo("#members");
}
else {
$('div[data-contents="' + id + '"]').remove();
}
});
});
答案 1 :(得分：1)
如果我正确地理解了您的问题，那么您可以获得X个可用的点数，而且您只能填写那么多。如果是这种情况，我认为这就是您要寻找的：jsFiddle。如果没有，其他一些解决方案可能会更好......
var $selections = $('ul.selections');
$('input:checkbox').click(function() {
var id = $(this).val();
if($(this).is(':checked')) {
var $label = $(this).next('label');
var $spot = $selections.find('li:not(.full)');
if($spot.length == 0) {
alert('no more spots open!');
return false;
}
$spot.eq(0).addClass('full').html($label.clone());
} else {
var $label = $selections.find('label[for=' + id + ']');
$label.closest('li').remove();
$selections.append($('<li/>').html(' '));
}
});
使用此HTML：
<p>Options</p>
<ul>
<li><input type='checkbox' name='check[]' id='159' value='159' /> <label for='159'>Person 1</label></li>
<li><input type='checkbox' name='check[]' id='160' value='160' /> <label for='160'>Person 2</label></li>
....
</ul>
<p>Selections</p>
<!-- spots available = as many list items initially in HTML -->
<ul class='selections'>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
我制作了这些列表，因为这就是它们的真实含义，但是如果这就是你想要的，那么代码对DIV也是一样的。由于克隆了标签，因此单击选择列表上的标签将删除它。
答案 2 :(得分：1)
试试这个： jsFiddle example 。
<强>的jQuery
$('input:checkbox').click(function() {
if ($(this).is(':checked')) {
$('div:empty:first').html($(this).next('label').html());
}
else {
var foo = $(this);
$('div').each(function() {
if ($(this).html() == foo.next('label').html()) {
$(this).html($(this).next('div').html());
$(this).nextAll('div').each(function() {
$(this).html($(this).next('div').html());
});
}
});
}
});
答案 3 :(得分：1)
基于您的代码的简单方法http://jsfiddle.net/joevallender/rTQMe/
$(document).ready(function(){
$('input:checkbox').click(function(){
var $checked = $('#checked');
$checked.html('');
$('input:checkbox').each(function(index){
if($(this).is(':checked')) {
$checked.append('<div>' + $('label[for="'+ $(this).attr('id') +'"]').text() + '</div>');
}
});
});
});
答案 4 :(得分：0)
有一些方法可以提高效率，但这应该适用于您的目的：
$(function(){
var numberOfDivs = 6;
$('input:checkbox').click(function(){
var id = $(this).attr('id');
if($(this).is(':checked')){
for(i = 1; i < numberOfDivs - 1; i++)
{
var div = $('#member' + i);
if(div.text() !== ''){
div.text( ($('label[for="'+ id +'"]').text() );
}
}
}
else{
var searchText = $('label[for="'+ id +'"]').text();
for(i = 1; i < numberOfDivs - 1; i++)
{
var div = $('#member' + i);
if(div.text() === searchText){
div.text('');
}
}
}
});
});
答案 5 :(得分：0)
我将如何做到这一点：
$(function(){
$('input:checkbox').click(function(){
var id = this.id;
if(this.checked){
var member = $('#member1');
var i = 1;
while(member.data('num') == 1)
{
member = $('#member'+(++i));
}
member.text($('label[for="'+ id +'"]').text()).data('num',1);
}
else{
var removed = false;
$('div').each(function(){
$(this).children('label').each(function(){
if(!removed && id == $(this).attr('for'))
{
removed = true;
$(this).parent().remove('label[for="'+$(this).attr('for')+'"]');
}
}
if(removed) //bubble the labels up into the next highest div.
{
if($(this).data('num') == 1)
var lastObject = $(this).children('label');
$(this).prev().append(lastObject);
}
}
}
});
});