css - 我需要组合复选框来充当 AND，而不是 OR

Question

我曾经是一名程序员，但已经 15 年没有编程了，所以我是 pre-web。我花了最后 2 天时间学习 HTML 和 CSS 来组合这个:https://www.visualdiaryguide.com/selector.html

问题是当我选中这些框时，我需要选择来反射(reflect)艺术形式和风格的组合，而不是一个集合。例如，当我单击 2D-Painting and Realism 时，白色选区应该缩小而不是扩大。

感觉我需要重新设计整个东西(我希望不是这样)。我真的不想也学习 JavaScript :(

如有任何建议，我们将不胜感激。我假设您可以从网站上看到 HTML 和 CSS 代码，因此我不会在此处包含它们。

我尝试组合 ID 等但无济于事。

我假设您可以从网站上看到 HTML 和 CSS 代码，因此我不会在此处包含它们。 https://www.visualdiaryguide.com/selector.html

Answer 1

我将此添加为答案，因为我相信下面的内容将结束这条线索并帮助其他人尝试实现同样的目标。上面的 Sfilli_81 是正确的。这需要一点 JavaScript 魔法，事实上，一点 jQuery 和一些设计更改。复选框变成了 2 组单选按钮。您可以通过单击原始问题中的链接查看实时版本。

var aForm = 0;变种风格= 0;$(文档).ready(函数() { $("[name='ArtForm']").click(函数() { aForm = $(这个); //恢复默认颜色 $(".characters [related^='a'] hh2").css("color", "#204A0B"); //所选表单和样式组合中的颜色 如果 (aForm.is(':checked')) { 如果(aStyle === 0){ $(".characters [related~='"+ aForm.prop('id') + "'] hh2").css("color", "white"); } 别的 { $(".characters [related~='"+ aForm.prop('id') + "'][related~='"+ aStyle.prop('id') + "'] hh2").css("白颜色”); } } }); $("[name='ArtStyle']").click(函数() { aStyle = $(这个); //恢复默认颜色 $(".characters [related^='a'] hh2").css("color", "#204A0B"); //所选表单和样式组合中的颜色 如果 (aStyle.is(':checked')) { 如果(aForm === 0){ $("[.characters related~='"+ aStyle.prop('id') + "'] hh2").css("color", "white"); } 别的 { $(".characters [related~='"+ aForm.prop('id') + "'][related~='"+ aStyle.prop('id') + "'] hh2").css("白颜色”); } } });});