0

名前の横にチェックボックスが付いている人のリストがあります。チェックボックスをクリックすると、その人の名前がページ下部の空のスロットのリストに追加されます。

空のスロットのリストは、境界線のある空のdivです。また、デフォルトの数は6です。しかし、ユーザーが必要に応じてスロットを追加および削除するために、これら2つの単純な関数を作成しました。彼らはこのように見えます：

function addSlot() {
    var count = jQuery('.member').length;
    var div_id = count + 1;
    $("#list").append("<div id ='member" + div_id + "' class='member'></div>");
}

function removeSlot() {
    var div_id = jQuery('.member').length;
    $('#member' + div_id + '').remove();
}

そうそう、彼らはかなり基本的です。今、私ができないトリッキーなことは、名前が入っているスロットを削除すると、対応するチェックボックスがオフになるようにすることです。それがどれほど実行可能かわからない。私の「人」と「スロット」は次のようになります。

<input type='checkbox' name='check[]' id='159' value='159' /><label for='159'>John Smith</label>

と

<div id="member1" class="member"></div>

だから私はそれが必要だと思うので、入力されたdivを削除すると、そのdivのコンテンツが取得され、それを使用して、そのコンテンツに対応するラベルのチェックボックスがオフになりますか？意味がある？

4

2 に答える 2

0

私がそれを実装するのであれば、私はこのソリューションを使うだろうと思います。

$('input[type=checkbox]').change(function(){
    var $t = $(this), id = $t.attr('id'), $list = $('#list');
    if($t.is(':checked')){
        $list.append("<div class='member' data-id='" + id + "'></div>");
    }
})

function removeSlot(){
    var $t = $('.member').eq(-1), id = $t.attr('data-id');
    $('#' + id).attr('checked', false);
    $t.remove();
}

編集：

私は今あなたの意味を理解していると思います。私の考えは、スロットをチェックボックスにリンクするためにまだいくつかの属性を使用しています。期待どおりに機能するかどうかを確認してください、http：//jsfiddle.net/uNMvs/4/

var $list = $('#list');

$list.find('.member').attr('data-id', '-1');

$('input:checkbox').change(function(){
   var $t = $(this), $lbl = $t.next(), 
       text = $lbl.html(), id = $t.attr('id');

    if($t.is(':checked')){
        $slot = $list.find('.member[data-id=-1]').eq(0);
        if($slot.size()) $slot.html(text).attr('data-id', id);
        else {
            alert('Please add another slot first');
            $t.attr('checked', false);            
        }
    } else {
        $list.find('.member[data-id=' + id + ']').attr('data-id', '-1').empty();
    }
});

$('#addSlot').click(function () {
    $list.append("<div data-id='-1' class='member'></div>");
})

$('#removeSlot').click(function () {
    var $slot = $list.find('.member').eq(-1);
    $('#' + $slot.attr('data-id')).attr('checked', false);
    $slot.remove();
})

​
于 2012-06-21T13:01:44.180 に答える
0

私はあなたのフィドルを試しましたが、いくつかの機能が機能しません：

私は次のようにいくつかの部分を変更しました：

$('#add').click(function(){
    var count = $('.member').length;
    var div_id = count + 1;
    $("#list").append("<div id ='member" + div_id + "' class='member'></div>");
});

$('#remove').click(function(){
    $('.member:last').remove();
});

関数addSlot（）と関数removeSlot（）を置き換えます

と

<input type="button" id="add" value="Addslot" /><br />

<input type="button" value="RemoveSlot" id="remove" /><br />

これはjquery1.4.4で動作するようです

フィドル

于 2012-06-21T15:18:41.803 に答える