javascript - 通过jQuery全选

我想通过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>

最佳答案

简单

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

应该工作正常。

Demo



高级

如果您想更高级一些，并且取消选中“ all”（如果所有功能都未选中）的选中，则可以执行以下操作：

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

如果取消选择一个子项目，它将取消选择“所有”，如果选择了所有子项目，它将选择“所有”。

Demo

关于javascript - 通过jQuery全选，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14897419/