基于多个复选框选择的显示页面元素
基于多个复选框选择的显示页面元素
提问于 2020-07-27 17:33:30
我只是进入JS/jquery并尝试基于多个复选框选择来显示页面元素。我希望所有元素从未选中的所有复选框开始显示，然后在进行一个或多个复选框选择时，只显示所选div类的元素(除非所有复选框都未选中，否则所有其他元素都将隐藏)。
我所处的陷阱是，它是反向工作的，因此，当我以未选中的所有显示和复选框开始时，我会选中一个(或多个)，所选值的元素将消失。
更复杂的陷阱是，一些元素可能有多个类值，如夏季和冬季的值。如果我取消选择/选择其中一个复选框，这将隐藏起来。
你的帮助在这一困境中得到了极大的赞赏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script>
$(document).ready(function () {
$('input[name="mySeason"]').click(function () {
var x = $(this).attr("value");
$("." + x).toggle();
});
});
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="mySeason" value="summer" /> Summer</label>
<label><input type="checkbox" name="mySeason" value="autumn" /> Autumn</label>
<label><input type="checkbox" name="mySeason" value="winter" /> Winter</label>
<label><input type="checkbox" name="mySeason" value="spring" /> Spring</label>
</div>
<div class="summer">Summer</div>
<div class="autumn">Autumn</div>
<div class="summer winter">Summer & Winter</div>
<div class="winter">Winter</div>
<div class="spring">Spring</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-27 18:11:48
要实现这一点，最简单的方法是向所有目标季节添加一个公共类。然后，您可以使用map()构建一个选择器来针对它们，隐藏没有任何检查类的任何元素。
还请注意，在处理复选框或单选按钮时使用change()而不是click()是很好的做法。试试这个：
jQuery($ => {
let $seasons = $('.season');
let $checkboxes = $('input[name="mySeason"]').on('change', function() {
$seasons.show();
let selector = $checkboxes.filter(':checked').map((i, el) => '.' + el.value).get().join(',');
if (selector.length != 0)
$seasons.filter(`:not("${selector}")`).hide();
});
});<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<div>
<label><input type="checkbox" name="mySeason" value="summer" /> Summer</label>
<label><input type="checkbox" name="mySeason" value="autumn" /> Autumn</label>
<label><input type="checkbox" name="mySeason" value="winter" /> Winter</label>
<label><input type="checkbox" name="mySeason" value="spring" /> Spring</label>
</div>
<div class="season summer">Summer</div>
<div class="season autumn">Autumn</div>
<div class="season summer winter">Summer & Winter</div>
<div class="season winter">Winter</div>
<div class="season spring">Spring</div>
-最新情况-
关于将‘或’逻辑转换为‘和’的注释，您所需要做的就是从选择器中删除, --注意这个版本中对join()的修改。
jQuery($ => {
let $seasons = $('.season');
let $checkboxes = $('input[name="mySeason"]').on('change', function() {
$seasons.show();
let selector = $checkboxes.filter(':checked').map((i, el) => '.' + el.value).get().join('');
if (selector.length != 0)
$seasons.filter(`:not("${selector}")`).hide();
});
});<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<div>
<label><input type="checkbox" name="mySeason" value="summer" /> Summer</label>
<label><input type="checkbox" name="mySeason" value="autumn" /> Autumn</label>
<label><input type="checkbox" name="mySeason" value="winter" /> Winter</label>
<label><input type="checkbox" name="mySeason" value="spring" /> Spring</label>
</div>
<div class="season summer">Summer</div>
<div class="season autumn">Autumn</div>
<div class="season summer winter">Summer & Winter</div>
<div class="season winter">Winter</div>
<div class="season spring">Spring</div>
Stack Overflow用户
发布于 2020-07-27 17:50:55
试试这个：
<label>input type="checkbox" onchange="toggl('summer')"> Summer</label>
<label>input type="checkbox" onchange="toggl('autumn')"> Autumn</label>
<label>input type="checkbox" onchange="toggl('winter')"> Winter</label>
<label>input type="checkbox" onchange="toggl('spring')"> Spring</label>
<div id="summer">Summer</div>
<div id="autumn">Autumn</div>
<div id="winter">Winter</div>
<div id="spring">Spring</div>
<script>
function toggl(id) {
const el = document.getElementById(id);
if (el.style.visibility == "hidden") el.style.visibility = "visible";
else el.style.visibility = "hidden";
}
</script>使用ID属性，这样就不需要处理类索引了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63120571
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号