javascript - 如何使用复选框将 html 标签插入到 div 中？

Question

我有一长串带有特定标签的复选框，看起来像这样:

<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" class="member"></div>
<div id="member2" class="member"></div>
<div id="member3" class="member"></div>
<div id="member4" class="member"></div>
<div id="member5" class="member"></div>
<div id="member6" class="member"></div>

有人帮我写了这个 JS 函数，这样当我点击一个复选框时，它的标签就会插入到第一个 div 中。它看起来像这样:

$(function(){
$('#159').click(function(){
    if($(this).is(':checked')){
        $('#member1').text($('label[for="159"]').text());
    }
    else{
        $('#member1').text('');   
    }
});
});

问题是我不知道如何编辑此函数以适用于任何单击的复选框。目前它只适用于 id 为 159 的复选框。第二个问题是该函数指定将其放入哪个 div 中。这个想法是，当第一个 div 已“满”时，下一个复选框会将标签插入第二个 div，然后是第三个，依此类推。

请注意，如果未选中该复选框，标签将从 div 中删除，并且其下方的 div 中的标签必须向上移动。有人知道这是否可能吗？

Answer 1

试试这个:

   $(function(){
    $('input:checkbox').click(function(){
       var id = $(this).attr('id');
        if($(this).is(':checked')){
            $('#member1').text($('label[for="'+ id +'"]').text());
        }
        else{
            $('#member1').text('');   
        }
    });
    });

---

   $(function(){
    $('input:checkbox').click(function(){
       var id = $(this).attr('id');
        if($(this).is(':checked')){
          if($('#memebr1').text() == "") {
            $('#member1').text($('label[for="'+ id +'"]').text());
          } else {
            $('#member2').text($('label[for="'+ id +'"]').text())
          }
        }
        else{
            $('#member1').text('');   
        }
    });
    });