复选框隐藏黑客

Posted 2023-03-12

【中文标题】复选框隐藏黑客

【英文标题】：Checkbox hide Hack

【发布时间】：2017-11-09 12:25:29

【问题描述】：

我尝试隐藏/显示 div“游戏类型”，但如果输入复选框在列表项中，则以下代码不会运行，我不明白为什么

是否可以在不使用js的情况下通过“no-game”输入禁用“pc”和“xbox”输入？

input[type = checkbox]# no - game: checked~#gametype 
  display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section>
    <h3>Worauf spielst du:</h3>
    <ul>
      <li>
        <input id="PC" name="PC" type="checkbox">
        <label for="PC" class="side-label">PC</label>
      </li>
      <li>
        <input id="Xbox" name="Xbox" type="checkbox">
        <label for="Xbox" class="side-label">Xbox</label>
      </li>
      <li>
        <input id="no-game" name="no-game" type="checkbox" checked>
        <label for="no-game" class="side-label">nichts</label>
      </li>
      <div id="gametype" class="gametype">
        <h3>Was spielst du:</h3>
        <li>
          <input id="MMO" name="MMO" type="checkbox">
          <label for="MMO" class="side-label">MMO</label>
        </li>
        <li>
          <input id="RPG" name="RPG" type="checkbox">
          <label for="RPG" class="side-label">RPG</label>
        </li>
        <li>
          <input id="Shooter" name="Shooter" type="checkbox">
          <label for="Shooter" class="side-label">Shooter</label>
        </li>
      </div>
    </ul>
  </section>
</div>

【参考方案1】：

您的选择器错误。应该是：

input#no-game:checked ~ #gametype 

【参考方案2】：

这是因为 ~ 选择器只匹配它的兄弟姐妹 以纯 css 方式进行，我建议将游戏类型元素作为输入的兄弟

input[type=checkbox]#no-game:checked ~ #gametype 
  display: none;

<div class="container">
  <section>
    <h3>Worauf spielst du:</h3> 
    
           
            <input id="PC" name="PC" type="checkbox">
            <label for="PC" class="side-label">PC</label>
       
            <input id="Xbox" name="Xbox" type="checkbox">
            <label for="Xbox" class="side-label">Xbox</label>
            
            
             <input id="no-game" name="no-game" type="checkbox" checked>
            <label for="no-game" class="side-label">nichts</label>
            
     
            
    
        <div id="gametype" class="gametype">
            <h3>Was spielst du:</h3> 
                <li> 
                    <input id="MMO" name="MMO" type="checkbox">
                    <label for="MMO" class="side-label">MMO</label>
                </li>
                <li> 
                    <input id="RPG" name="RPG" type="checkbox">
                    <label for="RPG" class="side-label">RPG</label>
                </li>
                <li>  
                    <input id="Shooter" name="Shooter" type="checkbox">
                    <label for="Shooter" class="side-label">Shooter</label>
                </li>
        </div>

  </section>
</div>

【讨论】：

是的，我知道如果我删除列表样式它运行良好，但它有一种使用列表样式的方法

它会使用 js ，但您也可以将输入字段用作列表样式.. 使用纯 css

好的，谢谢 :) 一些用户屏蔽了 js，所以使用它是个问题^^

【参考方案3】：

实际上你错过了复选框文本的双引号

input[type="checkbox"]#no-game:checked ~ #gametype  
    display: none;