我试图使一个页面，这取决于哪些复选框被选中，相应的div/值将显示。如果选中红色复选框，则将显示红色div。如果选中了蓝色单选，则会显示蓝色div。如果选中蓝色和绿色，则蓝色和绿色的div将显示，但不显示红色。如果所有复选框被点击，一切都会再次显示，所以我们可以重复这个过程，这意味着所有的显示，但如果我点击蓝色复选框，那么只有蓝色会显示，其他一切都不会，直到我点击一个额外的值-所以如果蓝色和红色被点击，那么蓝色和红色将显示，但不是绿色，因为还没有被点击。如果未选中蓝色，则只有红色显示
我已经做这个好几天了，我觉得我已经碰壁了。如果选中了一个复选框，我希望显示这个值，所以如果选中了'all'、'red'和'green'，那么'red'、'green'和'blue'也会显示出来，因为'all'复选框已经选中了。如果全部未选中，则蓝色div应该消失，因为它没有选中。我一直在使用谷歌、lydna.com和stack来让自己达到我目前的位置，但我不能像我希望的那样得到所有方面的工作。
我开始使用链接，现在使用复选框。如果单击其中一个框，它将显示相应的值。我希望所有div与'all'类显示在初始页面加载。我已经知道如何显示已检查的内容。
我有。all类设置为初始显示，因为这是我如何在初始加载时显示所有内容。我已经碰壁了，我希望你能帮我。我翻遍了成堆的资料，读了很多例子，但没有什么能和我想做的相比。
仅供参考:这里的学生/新手对javascript有最基本的了解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Elements Using Checkboxes</title>
<!--CSS stylesheet-->
<style>
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.all{display: block;}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
label {
margin-right: 15px;
}
</style>
<!--import jQuery cdn-->
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
// Enable-Disable text input when checkbox is checked or unchecked
// on initial page load, all is checked so everything shows
// if all clicked - show all, if all not checked, remove all that have no other checked values
// jQuery functions to show and hide divisions
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
</head>
<body>
<input type="hidden" name="all" value="false">
<div>
<!--checkboxes-->
<label><input type="checkbox" id="checkbox"
name="colorCheckbox" value="all" checked="true">
all
</label>
<label><input type="checkbox"
name="colorCheckbox" value="red">
red
</label>
<label><input type="checkbox"
name="colorCheckbox" value="green">
green
</label>
<label><input type="checkbox"
name="colorCheckbox" value="blue">
blue
</label>
</div>
<!--Divisions to be shown and hidden-->
<div class="all red box">all Red Selected</div>
<div class="all green box">all Green Selected</div>
<div class="all blue box">all Blue Selected</div>
</body>
</html>
您可以遍历所有checked复选框，并显示div否则隐藏它们。
演示代码 :
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
$(".box").hide() //hide all checkboxes
//loop through checked checkboxs
$('input[type="checkbox"]:checked').each(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).show(); //show them
})
});
});.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.all {
display: block;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
label {
margin-right: 15px;
}<!--import jQuery cdn-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<input type="hidden" name="all" value="false">
<div>
<!--checkboxes-->
<label><input type="checkbox" id="checkbox"
name="colorCheckbox" value="all" checked="true">
all
</label>
<label><input type="checkbox"
name="colorCheckbox" value="red">
red
</label>
<label><input type="checkbox"
name="colorCheckbox" value="green">
green
</label>
<label><input type="checkbox"
name="colorCheckbox" value="blue">
blue
</label>
</div>
<!--Divisions to be shown and hidden-->
<div class="all red box">all Red Selected</div>
<div class="all green box">all Green Selected</div>
<div class="all blue box">all Blue Selected</div>