选中所有其他复选框后，取消选择默认复选框

Question

我有一个HTML布局，其中包含多个复选框，选项之一是ALL和其他选项。当用户单击其他选项时，应将ALL设置为unchecked，而当未选择其他选项时，应选中ALL。

这是示例：https://codepen.io/desandro/pen/JLBdv

这可行，但是我想更改布局，以便输入在列表中。

<ul>
<li><input type="checkbox" name="category" class="all" checked>
<label>All</label></li>
<li>
<input type="checkbox" name="category" value=".category-football"><label>Football</label>
</li>
<li><input type="checkbox" name="category" value=".category-running"><label>Running </label></li><ul>

但是如果我将输入字段放在列表中，原始代码将不再起作用。

如何更改原始js以使用列表中的复选框？

Answer 1

只需将类名添加到您的输入中。

示例：所有输入可以是 class ='checkme_all'，而其他输入可以是 class ='checkme'

<ul>
<li>
<input class='checkme_all' type="checkbox" name="category" class="all" checked>
<label>All</label>
</li>
<li>
<input class='checkme' type="checkbox" name="category" value=".category-football">
<label>Football</label>
</li>
<li>
<input class='checkme' type="checkbox" name="category" value=".category-running">
<label>Running </label>
</li>
<ul>

然后使用jQuery提供所需的行为：

$('.checkme').on('change', function() {
    if($('.checkme_all').prop('checked')) {
        $('.checkme_all').prop('checked', false)
    }
})

$('.checkme_all').on('change', function() {
        $('.checkme').prop('checked', false)
})

结果：

这里是Fiddle