gpt4 book ai didi

javascript - html 问题模板复选框

转载 作者:行者123 更新时间:2023-11-28 03:40:28 25 4
gpt4 key购买 nike

你好,我需要一个不确定的复选框,当我点击一个复选框时,这个复选框下面的复选框必须被自动选中。

我不知道这段代码有什么问题,这个属性不起作用。我认为问题出在JS代码上。

    <html>

<style>
body {
padding: 20px;
}
ul {
list-style: none;
margin: 5px 20px;
}
li {
margin: 10px 0;
}
</style>

<script language="Javascript">
$('input[type="checkbox"]').change(function(e) {

var checked = $(this).prop("checked"),
container = $(this).parent(),
siblings = container.siblings();

container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked });


function checkSiblings(el) {

var parent = el.parent().parent(),
all = true;

el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); });


if (all && checked) {

parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked });


checkSiblings(parent);}

else if (all && !checked) {

parent.children('input[type="checkbox"]').prop("checked", checked);
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);}

else {

el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: false });}}


checkSiblings(container);
});
</script>
<body>
<h1>Indeterminate Checkboxes</h1>

<ul>
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall">Tall Things</label>

<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2">Giants</label>

<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1">Andre</label>
</li>
<li>
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2">Paul Bunyan</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3">Two sandwiches</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="short" id="short">
<label for="short">Short Things</label>

<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2">Mushrooms</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">One Sandwich</label>
</li>
</ul>
</li>
</ul>
</body>
</html>

最佳答案

工作正常。只需添加 Jquery 依赖。

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>

关于javascript - html 问题模板复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44236955/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com