我的网页上有以下复选框:
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk0" name="Test1" value="1" />
Any <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk1" name="Test1" value="12" />
BMW <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk2" name="Test1" value="11" />
FIAT <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk3" name="Test1" value="13" />
Tesla <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk4" name="Test1" value="54" />
Toyota <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk5" name="Test1" value="44" />
Ford <br />
如果有人选中“任何”复选框,那么我希望所有其他复选框也被选中。如果有人取消选中“任何”复选框,那么我希望其他复选框被取消选中。这就是我为了实现这一点而写的:
function ValueAnyDisable()
{
const otherCheckboxes = $('[id^=Chk]:not(#Chk0)');
if ($('#Chk0').is(':checked'))
otherCheckboxes.prop('checked', true);
else
otherCheckboxes.prop('checked', false);
}
上面的代码在选中“Any”时选中所有复选框,在未选中“Any”时取消选中所有复选框,但是在取消选中“Any”复选框之后,我不能单独选中任何复选框。所有其他复选框将无响应。我在一个循环中创建这些复选框,值来自数据库,所以我只能为所有复选框放置一个onclick事件。上面的复选框是呈现的HTML。
3条答案
按热度按时间lyr7nygr1#
在函数
ValueAnyDisable
中,您可以根据Chk0
是否选中来设置所有复选框的选中或取消选中。其他复选框没有单独的“生命”。通过调用所有其他复选框的相同函数onclick
,在某种程度上,您已经将所有其他复选框的值限制为Chk0
。由于您只需要侦听
Chk0
的检查以获得此特定功能,因此您可以仅对Chk0
运行click函数,并根据Chk0
的值设置其他复选框的值true或false。由于这个函数只在Chk0
上调用,其他复选框不会被限制其单独的检查操作。7y4bm7vi2#
通过添加
<label>
标记改进了您的html。并为复选框更改事件创建了一个最小函数:edqdpe6u3#
首先,你必须从另一个输入框中删除onclick事件,这样你的HTML就会像这样:
你的功能应该是:
**您也可以使用ID选择器来完成。**您可以删除onclik =“ValueAnyDisable()”:
您的jQuery事件更改为: