[英]Hide divs based on number of check boxes checked with CSS or JS
我想根据选中的复选框数量隐藏div。 div A在页面加载时可见，而div B隐藏。 如果选中的复选框总数等于2或大于2，则我想隐藏div A并显示divB。
<input class="iput" type="checkbox" name="E33" value="33" stock="20"/> A
<input class="iput" type="checkbox" name="E34" value="33" stock="6"/>
<input class="iput" type="checkbox" name="E646" value="33" stock="7"/>
<input class="iput" type="checkbox" name="E46" value="33" stock="7"/>
<input class="iput" type="checkbox" name="E626" value="33" stock="7"/>
<input class="iput" type="checkbox" name="E656" value="33" stock="7"/>
<div class="a"> Hello </div>
<div class="b" style="display:none"> BYE </div>
Total checked boxes= <span id="result"></span>
一直未能实现这一目标。 目前，我能够对总复选框进行计数，但无法找到一种使用总计数来显示和隐藏div的方法。
function showChecked(){
var length = document.querySelectorAll("input:checked").length,
text = "Total Number of Items Selected = "
document.getElementById("result").textContent = length;
document.getElementById("final").value = length;
}
document.querySelectorAll("input[type=checkbox]").forEach(i=>{
i.onclick = function(){
showChecked();
}
});
将单击事件侦听器添加到每个复选框以增加计数器变量，如果计数器大于或等于2，则将.a div的display属性设置为none ，将.b div的display属性设置为block 。
如果您给所有复选框都使用相同的名称（例如“ E33”），则可以使用querySelector来获取所有复选框：
document.querySelectorAll("input[name=E33]");
要获取所有名称为“ E33”的复选框，请使用:checked选择器：
document.querySelectorAll("input[name=E33]:checked").length;
<input class="iput" type="checkbox" name="E33" value="33" stock="20"/> A <input class="iput" type="checkbox" name="E33" value="33" stock="6"/> <input class="iput" type="checkbox" name="E33" value="33" stock="7"/> <input class="iput" type="checkbox" name="E33" value="33" stock="7"/> <input class="iput" type="checkbox" name="E33" value="33" stock="7"/> <input class="iput" type="checkbox" name="E33" value="33" stock="7"/> <div class="a" id="a"> Hello </div> <div class="b" style="display:none" id="b"> BYE </div> <script> var a = document.getElementById("a"); var b = document.getElementById('b'); var checked = document.querySelectorAll("input[ name=E33]:checked").length; var checkboxes = document.querySelectorAll("input[name=E33]"); for(let i = 0; i < checkboxes.length; i++){ checkboxes[i].addEventListener("click", function(e){ if(this.checked){ checked++; if(checked>=2){ a.style.display = "none"; b.style.display = "block"; } } else { checked--; if(checked<2){ a.style.display = "block"; b.style.display = "none"; } } }); } </script>
如果要按类别选择复选框：
<input class="input" type="checkbox" name="E33" value="33" stock="20"/> A <input class="input" type="checkbox" name="E34" value="33" stock="6"/> <input class="input" type="checkbox" name="E646" value="33" stock="7"/> <input class="input" type="checkbox" name="E46" value="33" stock="7"/> <input class="input" type="checkbox" name="E626" value="33" stock="7"/> <input class="input" type="checkbox" name="E656" value="33" stock="7"/> <div class="a" id="a"> Hello </div> <div class="b" style="display:none" id="b"> BYE </div> <script> var a = document.getElementById("a"); var b = document.getElementById('b'); var checked = document.querySelectorAll("input.input:checked").length; var checkboxes = document.querySelectorAll("input.input"); for(let i = 0; i < checkboxes.length; i++){ checkboxes[i].addEventListener("click", function(e){ if(this.checked){ checked++; if(checked>=2){ a.style.display = "none"; b.style.display = "block"; } } else { checked--; if(checked<2){ a.style.display = "block"; b.style.display = "none"; } } }); } </script>
扫描所有元素的功能将是最简单的方法。
在此示例中，我创建了一个名为getAmountChecked的函数，该函数扫描类为'iput'的所有复选框。 然后，计算出有多少个，被检查了多少个和未被检查了多少个； 我喜欢在查看此类信息时访问任何重要信息。 这以具有值totalItems ， totalChecked和totalUnchecked的对象的形式出现 。
我的函数调用verifyInputs和getAmountChecked使用totalChecked的值，以确定哪些元素显示/隐藏。
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function getAmountChecked(className) {
var registeredInputs = document.getElementsByClassName(className);
var totalChecked = 0;
for(var i = 0; i < registeredInputs.length; i++) {
totalChecked+=registeredInputs[i].checked==true;
}
return {totalItems: registeredInputs.length, totalChecked:totalChecked, totalUnchecked: registeredInputs.length-totalChecked};
}
function verifyInputs(className) {
var checkCount = getAmountChecked(className);
document.getElementById('a').style.display = checkCount.totalChecked < 2 ? 'block' : 'none';
document.getElementById('b').style.display = checkCount.totalChecked >= 2 ? 'block' : 'none';
}
</script>
</head>
<body>
<input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E33" value="33" stock="20"/>
<input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E34" value="33" stock="6"/>
<input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E646" value="33" stock="7"/>
<input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E46" value="33" stock="7"/>
<input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E626" value="33" stock="7"/>
<input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E656" value="33" stock="7"/>
<div class="a" id="a"> Hello </div>
<div class="b" id="b" style="display:none"> BYE </div>
</body>
</html>
注意，这完全可以在CSS中实现：
/* styling the <div> element with a class of "a",
the 'default' state and the state in which
one of the <input> elements are checked: */
div.a,
input:checked~div.a {
display: block;
}
/* styling the <div> element with the class of 'b',
and also the <div> element with the class of 'a'
when it's preceded by two <input> elements that
are checked: */
div.b,
input:checked~input:checked~div.a {
display: none;
}
/* finally we show the <div> with a class of 'b'
when it's preceded by two <input> elements
both of which are checked: */
input:checked~input:checked~div.b {
display: block;
}
div.a, input:checked~div.a { display: block; } div.b, input:checked~input:checked~div.a { display: none; } input:checked~input:checked~div.b { display: block; }
<input class="iput" type="checkbox" name="E33" value="33" stock="20" /> <input class="iput" type="checkbox" name="E34" value="33" stock="6" /> <input class="iput" type="checkbox" name="E646" value="33" stock="7" /> <input class="iput" type="checkbox" name="E46" value="33" stock="7" /> <input class="iput" type="checkbox" name="E626" value="33" stock="7" /> <input class="iput" type="checkbox" name="E656" value="33" stock="7" /> <div class="a"> Hello </div> <div class="b"> BYE </div>
JS小提琴演示 。
在上面的CSS中，我使用了tilde（ ~ ）运算符，即同级组合器。 这将选择以下同级元素。 选择器：
`input:checked ~ input:checked ~ div.b`
如果div.b两个或更多<input>元素，则将与div.b匹配。
这种方法有效。 但是，需要注意的是：如果有多组单选按钮，每组后跟<div>元素，则借助~组合器，检查第一组中的<input>元素也将选择样式，第二组中的<div>元素：
div.a, input:checked~div.a { display: block; } div.b, input:checked~input:checked~div.a { display: none; } input:checked~input:checked~div.b { display: block; }
<input class="iput" type="checkbox" name="E33" value="33" stock="20" /> <input class="iput" type="checkbox" name="E34" value="33" stock="6" /> <input class="iput" type="checkbox" name="E646" value="33" stock="7" /> <input class="iput" type="checkbox" name="E46" value="33" stock="7" /> <input class="iput" type="checkbox" name="E626" value="33" stock="7" /> <input class="iput" type="checkbox" name="E656" value="33" stock="7" /> <div class="a"> Hello </div> <div class="b"> BYE </div> <input class="iput" type="checkbox" name="E33" value="33" stock="20" /> <input class="iput" type="checkbox" name="E34" value="33" stock="6" /> <input class="iput" type="checkbox" name="E646" value="33" stock="7" /> <input class="iput" type="checkbox" name="E46" value="33" stock="7" /> <input class="iput" type="checkbox" name="E626" value="33" stock="7" /> <input class="iput" type="checkbox" name="E656" value="33" stock="7" /> <div class="a"> Hello </div> <div class="b"> BYE </div>
JS小提琴演示 。
为了防止这种情况，每个“组”必须包装在一个元素中，以防止通用同级组合器匹配后续组中的元素：
div.a, input:checked~div.a { display: block; } div.b, input:checked~input:checked~div.a { display: none; } input:checked~input:checked~div.b { display: block; }
<div> <input class="iput" type="checkbox" name="E33" value="33" stock="20" /> <input class="iput" type="checkbox" name="E34" value="33" stock="6" /> <input class="iput" type="checkbox" name="E646" value="33" stock="7" /> <input class="iput" type="checkbox" name="E46" value="33" stock="7" /> <input class="iput" type="checkbox" name="E626" value="33" stock="7" /> <input class="iput" type="checkbox" name="E656" value="33" stock="7" /> <div class="a"> Hello </div> <div class="b"> BYE </div> </div> <div> <input class="iput" type="checkbox" name="E33" value="33" stock="20" /> <input class="iput" type="checkbox" name="E34" value="33" stock="6" /> <input class="iput" type="checkbox" name="E646" value="33" stock="7" /> <input class="iput" type="checkbox" name="E46" value="33" stock="7" /> <input class="iput" type="checkbox" name="E626" value="33" stock="7" /> <input class="iput" type="checkbox" name="E656" value="33" stock="7" /> <div class="a"> Hello </div> <div class="b"> BYE </div> </div>
JS小提琴演示 。
此外，用于<input>元素的常见UI方法是将它们包装在<label>元素中，以便单击<label>的文本/内容以选中/取消选中该复选框。
如果将这些复选框包装在<label>那么可以预见的是，同级组合器将无法基于<input>元素的状态选择<div> <input>元素（请参阅：“ CSS父级是否存在？选择器？ ”）。 当然， <label>元素可以显示为<input>元素的同级（或其他关系）。 尽管这要求文档中每个带有<label> <input>必须具有id属性才能形成关联：
label { display: inline-block; width: 1.4em; height: 1.4em; text-align: center; line-height: 1.4em; box-shadow: 0 0 0 1px #000; border-radius: 0.2em; cursor: pointer; margin: 0 0.2em; } div.a, input:checked~div.a { display: block; } div.b, input:checked~input:checked~div.a { display: none; } input:checked~input:checked~div.b { display: block; }
<form> <fieldset> <legend>All the labels</legend> <fieldset> <legend>One</legend> <label for="a">a</label> <label for="b">b</label> <label for="c">c</label> <label for="d">d</label> <label for="e">e</label> <label for="f">f</label> </fieldset> <fieldset> <legend>Two</legend> <label for="g">g</label> <label for="h">h</label> <label for="i">i</label> <label for="j">j</label> <label for="k">k</label> <label for="l">l</label> </fieldset> </fieldset> <fieldset> <legend>Group 1</legend> <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="a"> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b"> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c"> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d"> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e"> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f"> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> <fieldset> <legend>Group 2</legend> <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="g"> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h"> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i"> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j"> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k"> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l"> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> </form>
JS小提琴演示 。
更明智的做法是，允许这些<label>元素的样式反映<input>元素的选中/未选中性质的样式，它们将跟随这些元素（尽管将一个<input>与多个<label>关联起来是完全有效的元素，在此演示中，我将放错位置的原始组保留在原处，以演示与单个<input>关联的多个<label>元素有效）：
label { display: inline-block; width: 1.4em; height: 1.4em; text-align: center; line-height: 1.4em; box-shadow: 0 0 0 1px #000; border-radius: 0.2em; cursor: pointer; margin: 0 0.2em; } /* styling the <label> adjacent to an <input>: */ input+label { color: #000; background-color: #fff; } /* styling the <label> adjacent to a checked <input>: */ input:checked+label { color: #fff; background-color: limegreen; } div.a, input:checked~div.a { display: block; } div.b, input:checked~input:checked~div.a { display: none; } input:checked~input:checked~div.b { display: block; }
<form> <fieldset> <legend>All the labels</legend> <fieldset> <legend>One</legend> <label for="a">a</label> <label for="b">b</label> <label for="c">c</label> <label for="d">d</label> <label for="e">e</label> <label for="f">f</label> </fieldset> <fieldset> <legend>Two</legend> <label for="g">g</label> <label for="h">h</label> <label for="i">i</label> <label for="j">j</label> <label for="k">k</label> <label for="l">l</label> </fieldset> </fieldset> <fieldset> <legend>Group 1</legend> <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="a"><label for="a">a</label> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b"><label for="b">b</label> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c"><label for="c">c</label> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d"><label for="d">d</label> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e"><label for="e">e</label> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f"><label for="f">f</label> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> <fieldset> <legend>Group 2</legend> <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="g"><label for="g">g</label> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h"><label for="h">h</label> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i"><label for="i">i</label> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j"><label for="j">j</label> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k"><label for="k">k</label> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l"><label for="l">l</label> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> </form>
JS小提琴演示 。
参考文献：
:checked伪类 。
根据复选框显示隐藏内容，如果选中一个复选框禁用另一个复选框
[英]Show hide content based on check boxes, if one check box checked disable another check boxes
编写jQuery代码以检查是否选中了复选框，并指出选中的复选框数量？
[英]Write jquery code to check if the check boxes are checked or not and indicate the number of check boxes checked?
流星：如何根据部分中复选框的数量设置数字
[英]Meteor: How to set a number based on the number of checked boxes within a section
根据数组元素生成复选框，然后根据选中的复选框填充另一个数组
[英]Generate check boxes based on array elements then populate another array based on checked check boxes
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.