1

jqueryですべてを選択および選択解除したい。次のような構造にしたいです。[すべて選択]をクリックすると、すべての入力が選択され、クリックして選択を解除すると、すべてのセクションが削除されます。

誰かがこの種の問題を解決しますか？

<table>
<tr>
<td>
<ul>
<li>

<label for="ck"><input type="checkbox" name="country" value="ALL"/> SELECT ALL</label>
</li>

<li>

<label for="ck"><input type="checkbox" name="country" value="CD"/> CD</label>
</li>

<li>

<label for="ck"><input type="checkbox" name="country" value="ED"/>ED</label>
</li>

<li>

<label for="ck"><input type="checkbox" name="country" value="DD"/>DD</label>
</li>
<li>

<label for="ck"><input type="checkbox" name="country" value="FD"/>FD</label>
</li>
<li>

<label for="ck"><input type="checkbox" name="country" value="SD"/>SD</label>
</li>
</ul>
<td>
</tr>
</table>
4

1 に答える 1

8

単純

$("input:checkbox[value=ALL]").change(function() {
    $("input:checkbox[name=" + $(this).prop("name") + "]").prop("checked", $(this).prop("checked"));
});

うまくいくはずです。

デモ

高度

もう少し高度になり、「すべて」のチェックがオンになっていて、すべてが選択されていない場合は、「すべて」のチェックを外したい場合は、次の操作を実行できます。

$("input:checkbox[value=ALL]").change(function() {
    $("input:checkbox[name=" + $(this).prop("name") + "]").prop("checked", $(this).prop("checked"));
});
$("input:checkbox[value!=ALL]").change(function() {
    var allCheckboxesAreChecked = true;
    $("input:checkbox[name=" + $(this).prop("name") + "][value!=ALL]").each(function() {
        if (!$(this).prop("checked")) {
            allCheckboxesAreChecked = false;
            return false;
        }
    });
    $("input:checkbox[name=" + $(this).prop("name") + "][value=ALL]").prop("checked", allCheckboxesAreChecked);
});

これにより、サブアイテムが選択解除されている場合は「すべて」の選択が解除され、すべてのサブアイテムが選択されている場合は「すべて」が選択されます。

デモ

于 2013-02-15T15:03:36.300 に答える