如果单击输入，CSS div 隐藏

Question

我需要你的帮助。 如果单击.radios .mevcut input ~ #checks，则显示 div。 如何在checks div 上不显示任何内容。

.radios .mevcut input~#checks {
  display: none;
}

<div class="radios">
  <h4>Proje Türü</h4>
  <input type="radio" id="statik" checked="checked" name="projeturu" value="statikproje">
  <label for="statik">Statik Proje</label>
  <input type="radio" id="fenni" name="projeturu" value="fenniproje">
  <label for="fenni">Fenni Mesuliyet</label>
  <div class="mevcut">
    <input type="radio" id="mevcut" name="projeturu" value="mevcutyapi">
    <label for="mevcut">Mevcut Yapı</label>
  </div>
</div>
<div class="checks" id="checks">
  <h4>Hizmet Bölümleri:</h4>
  <input type="checkbox" id="checks-oneri-raporu" name="projeturu" value="statikproje">
  <label for="checks-oneri-raporu">Öneri Raporu</label>
  <input type="checkbox" id="checks-on-proje" name="projeturu" value="fenniproje">
  <label for="checks-on-proje">Ön Proje</label>
  <input type="checkbox" id="checks-uyg-projesi" checked="checked" name="projeturu" value="mevcutyapi">
  <label for="checks-uyg-projesi">Uygulama Projesi ve Detayları</label>
  <input type="checkbox" id="checks-metraj" name="projeturu" value="fenniproje">
  <label for="checks-metraj">Metraj[Kalıp,Demir,Beton,Duvar]</label>
  <input type="checkbox" id="checks-celik" name="projeturu" value="mevcutyapi">
  <label for="checks-celik">Çelik</label>
</div>

Answer 1

我不确切知道您要达到的目标。 据我了解，如果选中任何无线电，您正在尝试显示复选框。仅使用 HTML 和 CSS 以及您的 HTML 结构，这是不可能的

对于general sibling combinator (~)，您需要将相关元素（或其子元素）设为兄弟元素，即它们共享相同的父元素

.radios .checks input[type=checkbox],
.radios .checks input[type=checkbox] + label{
  display: none;
}
.radios input[type="radio"]:checked ~ .checks input[type=checkbox],
.radios input[type="radio"]:checked ~ .checks input[type=checkbox] + label {
  display: inline;
}

<div class="radios">

  <h4>Proje Türü</h4>
  <input type="radio" id="statik" name="projeturu" value="statikproje">
  <label for="statik">Statik Proje</label>
  <input type="radio" id="fenni" name="projeturu" value="fenniproje">
  <label for="fenni">Fenni Mesuliyet</label>
  <input type="radio" id="mevcut" name="projeturu" value="mevcutyapi">
  <label for="mevcut">Mevcut Yapı</label>
  <div class="checks" id="checks">
    <h4>Hizmet Bölümleri:</h4>
    <input type="checkbox" id="checks-oneri-raporu" name="projeturu" value="statikproje">
    <label for="checks-oneri-raporu">Öneri Raporu</label>
    <input type="checkbox" id="checks-on-proje" name="projeturu" value="fenniproje">
    <label for="checks-on-proje">Ön Proje</label>
    <input type="checkbox" id="checks-uyg-projesi" checked="checked" name="projeturu" value="mevcutyapi">
    <label for="checks-uyg-projesi">Uygulama Projesi ve Detayları</label>
    <input type="checkbox" id="checks-metraj" name="projeturu" value="fenniproje">
    <label for="checks-metraj">Metraj[Kalıp,Demir,Beton,Duvar]</label>
    <input type="checkbox" id="checks-celik" name="projeturu" value="mevcutyapi">
    <label for="checks-celik">Çelik</label>
  </div>
</div>

如果您想尝试相反的方法，例如如果选中任何单选，则隐藏复选框

.radios .checks input[type=checkbox],
.radios .checks input[type=checkbox] + label{
  display: inline;
}
.radios input[type="radio"]:checked ~ .checks input[type=checkbox],
.radios input[type="radio"]:checked ~ .checks input[type=checkbox] + label {
  display: none;
}

<div class="radios">

  <h4>Proje Türü</h4>
  <input type="radio" id="statik" name="projeturu" value="statikproje">
  <label for="statik">Statik Proje</label>
  <input type="radio" id="fenni" name="projeturu" value="fenniproje">
  <label for="fenni">Fenni Mesuliyet</label>
  <input type="radio" id="mevcut" name="projeturu" value="mevcutyapi">
  <label for="mevcut">Mevcut Yapı</label>
  <div class="checks" id="checks">
    <h4>Hizmet Bölümleri:</h4>
    <input type="checkbox" id="checks-oneri-raporu" name="projeturu" value="statikproje">
    <label for="checks-oneri-raporu">Öneri Raporu</label>
    <input type="checkbox" id="checks-on-proje" name="projeturu" value="fenniproje">
    <label for="checks-on-proje">Ön Proje</label>
    <input type="checkbox" id="checks-uyg-projesi" checked="checked" name="projeturu" value="mevcutyapi">
    <label for="checks-uyg-projesi">Uygulama Projesi ve Detayları</label>
    <input type="checkbox" id="checks-metraj" name="projeturu" value="fenniproje">
    <label for="checks-metraj">Metraj[Kalıp,Demir,Beton,Duvar]</label>
    <input type="checkbox" id="checks-celik" name="projeturu" value="mevcutyapi">
    <label for="checks-celik">Çelik</label>
  </div>
</div>

如果你想取消复选框，如果最后一个收音机被选中

.radios .checks input[type=checkbox],
.radios .checks input[type=checkbox] + label{
  display: inline;
}
.radios #mevcut:checked ~ .checks input[type=checkbox],
.radios #mevcut:checked ~ .checks input[type=checkbox] + label {
  display: none;
}

<div class="radios">

  <h4>Proje Türü</h4>
  <input type="radio" id="statik" name="projeturu" value="statikproje">
  <label for="statik">Statik Proje</label>
  <input type="radio" id="fenni" name="projeturu" value="fenniproje">
  <label for="fenni">Fenni Mesuliyet</label>
  <input type="radio" id="mevcut" name="projeturu" value="mevcutyapi">
  <label for="mevcut">Mevcut Yapı</label>
  <div class="checks" id="checks">
    <h4>Hizmet Bölümleri:</h4>
    <input type="checkbox" id="checks-oneri-raporu" name="projeturu" value="statikproje">
    <label for="checks-oneri-raporu">Öneri Raporu</label>
    <input type="checkbox" id="checks-on-proje" name="projeturu" value="fenniproje">
    <label for="checks-on-proje">Ön Proje</label>
    <input type="checkbox" id="checks-uyg-projesi" checked="checked" name="projeturu" value="mevcutyapi">
    <label for="checks-uyg-projesi">Uygulama Projesi ve Detayları</label>
    <input type="checkbox" id="checks-metraj" name="projeturu" value="fenniproje">
    <label for="checks-metraj">Metraj[Kalıp,Demir,Beton,Duvar]</label>
    <input type="checkbox" id="checks-celik" name="projeturu" value="mevcutyapi">
    <label for="checks-celik">Çelik</label>
  </div>
</div>

更详细的解释

你的结构是这样的

.radios
    h4
    input#statik
    label
    input#fenni
    .mevcut
        input#mevcut <-- If this is checked --------------+
        label                                             |
.checks                                                   |
    h4                                                    |
    input#checks-oneri-raporu            ----+            |
    label                                    |            |
    input#checks-on-proje                    |            |
    label                                    |------------|
    input#checks-uyg-projesi                 |            
    label                                    |  These should be hidden          
    input#checks-metraj                      |            
    label                                    |            
    input#checks-celik                       |            
    label                                ----+            

选择器
.radios .mevcut input ~ #checks
不会工作，因为#checks 不是.radios .mevcut input 的兄弟

Answer 2

正如@yunzen 在他的回答中所说：

对于一般的兄弟组合子 (~)，您需要将相关元素（或其子元素）作为兄弟元素，即它们共享相同的父元素

这意味着这两个元素必须在同一父级下处于同一级别，因此如果您可以修改 HTML 代码，他的答案就很好。

否则你需要 JavaScript

theOptions = document.querySelectorAll('input[type="radio"]');

theOptions.forEach((opt) => {
  opt.addEventListener("change", () => {
    const displayValue = opt.getAttribute("id") === "mevcut" ? "none" : "block";
    document.getElementById("checks").style.display = displayValue;
  });
});

<div class="radios">
  <h4>Proje Türü</h4>
  <input type="radio" id="statik" checked="checked" name="projeturu" value="statikproje">
  <label for="statik">Statik Proje</label>
  <input type="radio" id="fenni" name="projeturu" value="fenniproje">
  <label for="fenni">Fenni Mesuliyet</label>
  <div class="mevcut">
    <input type="radio" id="mevcut" name="projeturu" value="mevcutyapi">
    <label for="mevcut">Mevcut Yapı</label>
  </div>
</div>
<div class="checks" id="checks">
  <h4>Hizmet Bölümleri:</h4>
  <input type="checkbox" id="checks-oneri-raporu" name="projeturu" value="statikproje">
  <label for="checks-oneri-raporu">Öneri Raporu</label>
  <input type="checkbox" id="checks-on-proje" name="projeturu" value="fenniproje">
  <label for="checks-on-proje">Ön Proje</label>
  <input type="checkbox" id="checks-uyg-projesi" checked="checked" name="projeturu" value="mevcutyapi">
  <label for="checks-uyg-projesi">Uygulama Projesi ve Detayları</label>
  <input type="checkbox" id="checks-metraj" name="projeturu" value="fenniproje">
  <label for="checks-metraj">Metraj[Kalıp,Demir,Beton,Duvar]</label>
  <input type="checkbox" id="checks-celik" name="projeturu" value="mevcutyapi">
  <label for="checks-celik">Çelik</label>
</div>