1

リンクをクリックしたときに、チェックされた項目をリスト間で移動しようとしています:

$('#add').click(function() {
    return !$('#select1 li:checked').appendTo('#select2');
});
$('#remove').click(function() {
    return !$('#select2 li:checked').appendTo('#select1');
});


<ul id="select1">
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />Checkbox 1</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />Checkbox 2</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />Checkbox 3</label>
    </li>
</ul>

<ul id="select2">
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_0" />Checkbox 4</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_1" />Checkbox 5</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_2" />Checkbox 6</label>
    </li>
</ul>

<a href="#" id="add">add</a>
<a href="#" id="remove">remove</a>

現在、リンクの追加または削除をクリックすると、リスト全体の 1 つが移動するだけです。

4

1 に答える 1

2

セレクターが正しくありません。セレクターはチェックされている入力要素(チェックボックスまたはラジオ ボタン) を探しますが、チェックされている要素 (起こり得ないこと):checkedを見つけようとしています。<li>

代わりに、:checked要素内の<li>要素を見つけて、それらを含む要素への参照を取得し、それらを<li>移動する必要があります。これを行うコードは次のようになります。

$('#add').click(function() {
    return !$('#select1 li :checked').closest('li').appendTo('#select2');
});
$('#remove').click(function() {
    return !$('#select2 li :checked').closest('li').appendTo('#select1');
});

この作業例を見てみたい場合。

于 2013-03-28T13:44:00.957 に答える