Question

所以我遇到了这个项目的特殊性，我不能使用javascript。重点是隐藏与未选中的单选按钮相关的任何内容。页面加载后会显示所有内容，但选择一个单选按钮内容后，我必须使所有其他单选按钮消失。

这是我的标记：

       <label>
                <input type="radio" name="group1" value="1" />
                <div class="radio-sample">
                    <img src="http://placehold.it/150x150">
                    <div class="con">
                        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
                            "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
                        <div type="button" class="btn btn-primary pull-right">1Primary</div>
                    </div>
                </div>
            </label>

            <label>
                <input type="radio" name="group1" value="2" />
                <div class="radio-sample">
                    <img src="http://placehold.it/150x150">
                    <div class="con">
                        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
                            "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
                        <div type="button" class="btn btn-primary pull-right">2Primary</div>
                    </div>
                </div>
            </label>
            <label>
                <input type="radio" name="group1" value="3" />
                <div class="radio-sample">
                    <img src="http://placehold.it/150x150">
                    <div class="con">
                        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
                            "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
                        <div type="button" class="btn btn-primary pull-right">2Primary</div>
                    </div>
                </div>
            </label>

Answer 1

将:checked伪类与~（兄弟）选择器一起使用：

input[type=radio]:checked ~ div.radio-sample {
    display: none;
}

但是，由于输入最初都将取消选中，因此所有内容都将被隐藏。唯一的解决方案是设置HTML，以便最初检查所有单选按钮：

<input type="radio" checked="checked" />

...然后在用户选择一个之后，其他人将被取消选中并隐藏其内容。

Answer 2

您可以使用:not(:checked)反转选中的选择器。

这是一个例子

input[type=radio]:not(:checked)~.radio-sample {
  display: none;
}

<label>
  <input type="radio" name="group1" value="1" />
  <div class="radio-sample">
    <img src="http://placehold.it/150x150">
    <div class="con">
      <p>Number 1</p>
      <button>Primary button 1</button>
    </div>
  </div>
</label>

<label>
  <input type="radio" name="group1" value="2" />
  <div class="radio-sample">
    <img src="http://placehold.it/150x150">
    <div class="con">
      <p>Number 2</p>
      <button>Primary button 2</button>
    </div>
  </div>
</label>

<label>
  <input type="radio" name="group1" value="3" />
  <div class="radio-sample">
    <img src="http://placehold.it/150x150">
    <div class="con">
      <p>Number 3</p>
      <button>Primary button 3</button>
    </div>
  </div>
</label>

仅使用CSS隐藏未选中的单选按钮

2 个答案: