如果使用 css 选中另一个复选框，如何隐藏一个复选框？

Question

I'm having problems getting a checkbox to hide another div using CSS when that checkbox is selected.例如，我有两个复选框

复选框 1
复选框 2

当复选框 1 被选中时，它应该隐藏复选框 2 但它没有。关于我做错了什么的想法？

这是我到目前为止所做的

#cover_photo_set_featured input:checked ~ #one_image_feature_image label {display:none}

<div id="cover_photo_set_featured">
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
</div>
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>

Answer 1

您无法在 CSS 中选择更高级别。

为此，您必须将要隐藏的 <input> 和 <div> 设置为至少相同的级别。

所以我们需要避免 <div id="cover_photo_set_featured"> 元素成为 .

的父元素

但是因为我看到您正在使用 ACF，所以我在它前面添加了 input 以便能够 select 它与 CSS，因此您可以轻松地 select 下一个 <input> 使用“+” select 或

我们现在可以将“display: none”和“aria-hidden”属性赋予<div>，这纯粹是为了帮助。

#cover_photo_set_featured {
  display: none;
}

#cover_photo_set_featured+input:checked~#one_image_feature_image label {
  display: none
}

<div id="cover_photo_set_featured" aria-hidden="true"></div>
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1

<div id="one_image_feature_image">
  <label>
     <input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
  </label>
</div>

如果使用 css 选中另一个复选框，如何隐藏一个复选框？

How to hide a checkbox if another checkbox is checked using css?

css

checkbox