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为“full”时，下一个复选框会将标签插入第二个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('');   
        }
    });
    });

Answer 2

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

Answer 3

试试这个。

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('');
        }
    });
});

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

3 个答案: