gpt4 book ai didi

javascript - 通过选中/取消选中一个复选框来选中/取消选中多个复选框

转载 作者:行者123 更新时间:2023-11-30 09:12:01 24 4
gpt4 key购买 nike

您好,我知道我的问题标题令人困惑,但我会尽力在此处进行解释。请先看我的代码:

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
<input type="checkbox" class="check" id="firstCheck" onclick="myFunction();"> First<br>
<input type="checkbox" class="check" id="secondCheck" onclick="myFunction1();"> Second <br>
<input type="checkbox" id="new"> A <br>
<input type="checkbox" id="new1"> B <br>

</body>
<script>
function myFunction() {
var checkBox = document.getElementById("firstCheck");
//var text = document.getElementById("text");
if (checkBox.checked == true){
//text.style.display = "block";
document.getElementById("new").checked = true;

}
else if (checkBox.checked == false){
document.getElementById("new").checked = false;
}
else {
text.style.display = "none";
}

}

function myFunction1(){
var checkBox = document.getElementById("secondCheck");
//var text = document.getElementById("text");
if (checkBox.checked == true){
//text.style.display = "block";
document.getElementById("new1").checked = true;
}
else if (checkBox.checked == false){
document.getElementById("new1").checked = false;
}
else {
text.style.display = "none";
}
}
</script>

<script>
$(document).ready(function(){
$('.check').click(function() {
$('.check').not(this).prop('checked', false);
});
});
</script>
</html>

我在这里做的是当我选择/取消选择复选框时,首先它会自动选择/取消选择复选框 A,类似地,当我选择/取消选择复选框时,它会自动选择/取消选择复选框 B。我使用了代码,以便第一个或第二个复选框将一次被选中,而不是两者都被选中。因此,当我选择复选框 First 时,它会选择复选框 A,当我选择复选框 Second 而不取消选中 First 时,A 和 B 都被选中。当我再次选择 First 而不取消选择 Second 时,A 和 B 都保持选中状态。这不是我想要的。我希望当有人选中 First 然后 A 应该被选中时发生,但是当有人选择 Second 时,A 的复选框本身应该被取消选中,就像复选框首先被取消选中一样。我想让它像这样的形式:[网站:] https://www.swiftcomarine.com.au/BOAT-PACKAGE-SPECIALS-X15.html

您可以在网站的右侧看到,当有人选中标准包时,它下面的一些复选框会自动选中,而当高级包被选中时,其他复选框会自动选中,而之前选中的复选框会自动取消选中。这就是我想要的表格。请在这方面帮助我。谢谢

最佳答案

这是适合您的要求的 fiddle 。

https://jsfiddle.net/y5tkphmr/2/

我在复选框 A 和 B 中添加了一个类。我添加了一个名为 resetCheckBoxes 的函数,它将通过在 function1 和 function2 之前调用此方法来取消选中复选框。

 <script>


function resetCheckBoxes(){
$(".reset").prop('checked', false);
}
function myFunction() {
resetCheckBoxes();
var checkBox = document.getElementById("firstCheck");
//var text = document.getElementById("text");
if (checkBox.checked == true) {
//text.style.display = "block";
document.getElementById("new").checked = true;

} else if (checkBox.checked == false) {
document.getElementById("new").checked = false;
} else {
text.style.display = "none";
}

}

function myFunction1() {
resetCheckBoxes();
var checkBox = document.getElementById("secondCheck");
//var text = document.getElementById("text");
if (checkBox.checked == true) {
//text.style.display = "block";
document.getElementById("new1").checked = true;
} else if (checkBox.checked == false) {
document.getElementById("new1").checked = false;
} else {
text.style.display = "none";
}
}


$(document).ready(function() {
$('.check').click(function() {
$('.check').not(this).prop('checked', false);
});
});

</script>

关于javascript - 通过选中/取消选中一个复选框来选中/取消选中多个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57918361/

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