如何使用复选框将 html 标签插入 div？答案

【问题标题】：How to insert a html label into div using a checkbox?如何使用复选框将 html 标签插入 div？
【发布时间】：2012-06-20 11:41:47
【问题描述】：

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

<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 中的标签必须向上移动。有人知道这是否可能吗？

【问题讨论】：

标签： javascript jquery checkbox

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

【讨论】：

这肯定解决了 id 问题。但是你知道是否有办法选择#member1，如果#member1已经有标签，选择#member2？
@AzzyDude 是的，这是一个错字，再试一次。
现在它说“#member1”.text 不是一个函数。阿迪尔的想法是对的。
@AzzyDud 那是另一个错字。

【解决方案2】：

试试这个。

Live Demo

   $(function() {

    $('input[type=checkbox][name=check\[\]]').click(function() {
        chkboxid = $(this).attr('id');
        if ($(this).is(':checked')) {

            $('#member' + eval($(this).index() + 1)).text($('label[for="' + chkboxid + '"]').text());

        }
        else {
            $('#member' + eval($(this).index() + 1)).text('');
        }
    });
});

【讨论】：

行得通！增加代码是否会更困难，如果取消选中复选框，名称将从 div 中删除？
div很多且复选框和div没有对应关系，应该删除哪个div的名称？
嗯，这个想法是你正在用名字制作一个列表。但是，如果您改变主意并想从列表中删除一个名称（通过取消选中该框），该名称应该会消失，并且列表中较低的名称会向上移动。这有意义吗？
我已经更新了我的答案，我希望这是你想要的。请看一看。
嘿，感谢您回复我！我没有错误地粘贴了你的函数，但现在似乎什么都没有发生？（不过它在小提琴中的工作方式是完美的！）

【解决方案3】：

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

【讨论】：

这肯定解决了 id 问题。但是你知道是否有办法选择#member1，如果#member1已经有标签，选择#member2？
$(".member").each(function(){ if($(this).html() == ""){ $(this).html($('label[ for="'+$(this).attr("id")+'"]').text()); exit; } });
替换 $('#member1').text($('label[for="'+$(this).attr("id")+'"]').text() );这一行由上面的代码
嗯，没有错误，但现在什么都没有发生。上面的 Adil 让它工作了。