选中所有其他框时,取消选中默认复选框

问题描述 投票:0回答:1

我有一个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以使用列表中的复选框?

javascript html
1个回答
0
投票

只需在输入中添加类名。

示例:所有输入可以是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)
})

结果:

enter image description here

这是一个Fiddle

© www.soinside.com 2019 - 2024. All rights reserved.