2

次のような特定のラベルが付いたチェックボックスの長いリストがあります。

<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>

そして、このフォームの下には、次のような 6 つの 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>

チェックボックスをクリックすると、ラベルが最初の div に挿入されるように、誰かがこの JS 関数を書くのを手伝ってくれました。外観は次のとおりです。

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

問題は、クリックされたチェックボックスで機能するようにこの関数を編集する方法がわからないことです。現在、ID が 159 のチェックボックスでのみ機能します。アイデアは、最初の div が「フル」の場合、次のチェックボックスがラベルを 2 番目の div に挿入し、次に 3 番目の div などに挿入するというものです。

チェックボックスがオフの場合、ラベルは div から削除され、その下の div のラベルは上に移動する必要があることに注意してください。これが可能かどうか知っている人はいますか？

4

3 に答える 3

2

これを試して：

   $(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('');   
        }
    });
    });
于 2012-06-20T11:44:03.590 に答える
1

これを試して。

ライブデモ

   $(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('');
        }
    });
});​
于 2012-06-20T12:11:35.343 に答える
1 
$(function(){
$('input[type=checkbox]').click(function(){
    if($(this).is(':checked')){
        $('#member1').text($('label[for="'+$(this).attr("id")+'"]').text());
    }
    else{
        $('#member1').text('');   
    }
});
});
于 2012-06-20T11:45:14.527 に答える