全部按jquery选择

Question

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

Answer 1

简单

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

如果已取消选择子项,则将取消选择"全部",如果已选择所有子项,则将选择"全部".

演示