如果选中复选框,则显示 div 否则隐藏,除非选中 'show all' 复选框
Show divs if chec box checked else hide unless the 'show all' checkbox checked
我正在尝试制作一个页面,根据选中的复选框,将显示相应的 divs/values。如果选中红色复选框,则将显示红色 div。如果选中蓝色单选框,将显示蓝色 div。如果选中蓝色和绿色,则蓝色和绿色 div 将显示,但不会显示红色。如果单击所有复选框,所有内容都会再次显示,这样我们就可以重复该过程,这意味着所有内容都在显示,但如果我单击蓝色复选框,则只有蓝色会显示,其他所有内容都不会显示,直到我单击另一个值 - 因此,如果单击蓝色和红色,则将显示蓝色和红色,但不会显示绿色,因为尚未单击。如果不勾选蓝色,则只有红色显示
我已经为此工作了几天,我觉得我碰壁了。如果选中复选框,我希望显示该值,因此如果选中 'all'、'red' 和 'green',则 'red'、'green'、并且 'blue' 会显示,因为 'all' 复选框已被选中。如果全部未选中,那么蓝色 div 应该消失,因为它没有被选中。我一直在使用 google、lydna.com 和堆栈来让自己达到目前的状态,但我无法让所有方面都像我希望的那样工作。
我从链接开始,现在使用复选框。如果单击其中一个框,它会显示相应的值。我希望所有带有 'all' class 的 div 在初始页面加载时显示。我已经想出如何显示选中的内容了。
我将 .all class 设置为初始显示,因为这是我如何让所有内容在初始加载时显示的。我碰壁了,我希望得到帮助。我浏览了堆栈并阅读了许多示例,但我发现的任何东西似乎都无法与我正在尝试做的相比。
仅供参考:这里的学生/新手对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>
我正在尝试制作一个页面,根据选中的复选框,将显示相应的 divs/values。如果选中红色复选框,则将显示红色 div。如果选中蓝色单选框,将显示蓝色 div。如果选中蓝色和绿色,则蓝色和绿色 div 将显示,但不会显示红色。如果单击所有复选框,所有内容都会再次显示,这样我们就可以重复该过程,这意味着所有内容都在显示,但如果我单击蓝色复选框,则只有蓝色会显示,其他所有内容都不会显示,直到我单击另一个值 - 因此,如果单击蓝色和红色,则将显示蓝色和红色,但不会显示绿色,因为尚未单击。如果不勾选蓝色,则只有红色显示
我已经为此工作了几天,我觉得我碰壁了。如果选中复选框,我希望显示该值,因此如果选中 'all'、'red' 和 'green',则 'red'、'green'、并且 'blue' 会显示,因为 'all' 复选框已被选中。如果全部未选中,那么蓝色 div 应该消失,因为它没有被选中。我一直在使用 google、lydna.com 和堆栈来让自己达到目前的状态,但我无法让所有方面都像我希望的那样工作。
我从链接开始,现在使用复选框。如果单击其中一个框,它会显示相应的值。我希望所有带有 'all' class 的 div 在初始页面加载时显示。我已经想出如何显示选中的内容了。
我将 .all class 设置为初始显示,因为这是我如何让所有内容在初始加载时显示的。我碰壁了,我希望得到帮助。我浏览了堆栈并阅读了许多示例,但我发现的任何东西似乎都无法与我正在尝试做的相比。
仅供参考:这里的学生/新手对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>