1

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

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

チェックボックスをクリックすると、ラベルが最初のdivに挿入されるように、このJS関数があります。外観は次のとおりです。

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

したがって、1 つの問題は、現在、関数がどの div (#member1) に配置するかを指定する必要があることです。最初の div が「フル」の場合、次のチェックボックスがそのラベルを 2 番目の div に挿入し、3 番目のチェックボックスがそのラベルを 3 番目の div に挿入するなどのように機能するはずです。

もう 1 つの問題は、チェックボックスがオフになった場合、そのラベルをその div から削除し、その下の div のラベルを上に移動する必要があることです。それが可能かどうか知っている人はいますか？私はどちらの問題でも助けを受け入れます！

4

6 に答える 6

2

警告: これはまったく別の方法で行います。

しかし、現在の構造を使用して:ライブ コピー| ソース(有効な を使用id)

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

私が行う最小限の変更：

  • div をコンテナーに入れて#memberX、検索を行う必要がないようにしid^=ます。
  • iddiv で値を使用しないでください#memberX。
  • 絶対に必要でない場合は、空の#memberdiv をまったく使用しないでください。これにより、コードが大幅に簡素化されます。
  • それらが必要な場合は、クリアするときに div を削除し、新しい空の div を最後に追加します。

例:ライブコピー| ソース

HTML:

#membersXdiv を に置き換えるだけ<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();
        }
    });
});

チェックボックスの入力をlabelsに移動すると、さらに単純化できます(これは、for属性をなくすこともできます) : ソース

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();
        }
    });
});
于 2012-06-20T15:37:28.640 に答える
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>');   
          }
      });      

  });

});
于 2012-06-20T16:08:13.113 に答える
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('&nbsp;'));        
    }
});

この 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>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

それが実際のものであるため、リストを作成しましたが、それが必要な場合、コードはDIVでも同じように機能します。ラベルは複製されているため、選択リストのラベルをクリックすると削除されます。

于 2012-06-20T15:48:44.407 に答える
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());
                });
            }
        });
    }
});​
于 2012-06-20T15:49:06.700 に答える
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('');                         
                 }
             }

        }
    });

});
于 2012-06-20T15:36:02.140 に答える
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);
                }
            }
        }
    });
});
于 2012-06-20T15:56:25.747 に答える