html – 检测多个选中的复选框

2023年12月15日 207次阅读

不使用
JavaScript,我希望只有在选中两个复选框时才会发生.所以像

#one:checked && #two:checked ~ p {
    color: red;
}

对于

<input id="one" type="checkbox" name="check"><label for="one">One</label>
<input id="two" type="checkbox" name="check"><label for="two">Two</label>
<p>Thing</p>

这显然不起作用.有没有办法在不使用JS的情况下检测这两个复选框？

最佳答案 是的,这是可能的.

如果选中第一个复选框,则选择第二个复选框,然后从那里选择p元素：

#one:checked ~ #two:checked ~ p {
  color: #f00;
}
<input id="one" type="checkbox" name="check"><label for="one">One</label>
<input id="two" type="checkbox" name="check"><label for="two">Two</label>
<p>Thing</p>

当然,如果您事先不知道订单,也可以概括选择器：

input:checked ~ input:checked ~ p {
  color: #f00;
}
<input id="one" type="checkbox" name="check"><label for="one">One</label>
<input id="two" type="checkbox" name="check"><label for="two">Two</label>
<p>Thing</p>
点赞