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 回答