如何在单击复选框时使标签出现

Question

如何在复选框被点击时显示标签<h3>？目前它是隐藏的。

<h3 class="bark">Bark Bark</h3>
<input type="checkbox" class="title">Hear a dog</input>

CSS：

.bark{ 
  visibility: hidden
}

input[type="checkbox"]:checked  {
visibility: visible  
}

- Deke

---

如果要针对<input>标签前面的兄弟元素进行操作，就需要使用JavaScript。如果.bark位于复选框后面，可以使用:checked + .bark { visibility: visible; }实现。由于你没有标记JavaScript，所以我没有直接回答。 - Bill Criswell

那就是我的问题。我只想用CSS实现它。这个解释了。 - Deke

可能是是否有“previous sibling” CSS选择器？的重复问题。 - Abhitalks

Answer 1

.bark{ 
  visibility: hidden
}

input[type="checkbox"]:checked + h3.bark  {
visibility: visible  
}

<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>

- yjs

---

这重复了OP在他们的问题中遇到的相同错误，即标记中的杂项</input>。 - Mr Lister

Answer 2

不使用脚本语言也有一个技巧：

.bark{ 
  visibility: hidden;
}

input[type="checkbox"]:checked + .bark {
   visibility: visible;
}

<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>

你应该在 input 后面放置 h3。使用 + 符号使 h3 可见。 工作示例

- ketan

---

这重复了OP在他们的问题中遇到的相同错误，即标记中的杂项</input>。 - Mr Lister

Answer 3

function checkInput(cbox) {
      if (cbox.checked) {
          document.getElementById('check_box').style.visibility='visible';
        }
      else{
            document.getElementById('check_box').style.visibility='hidden';
       }
 }

#check_box{ 
  visibility: hidden;
}

<h3 id="check_box">Bark Bark</h3>
<input type="checkbox" class="title"  onclick="checkInput(this);">Hear a dog

- Bijal

Answer 4

正如其他回答所说，您需要将复选框放在h3上方。
但是，如果您真的希望文本“Hear a dog”出现在h3下面，您需要在HTML和CSS中进行更多的更改。

#checkbark {
  display: none
}
.bark {
  visibility: hidden
}
#checkbark:checked + .bark {
  visibility: visible
}
label[for='checkbark'] {
  cursor: pointer;
}
label[for='checkbark']::before {
  content: '\2610  ';
}
#checkbark:checked ~ label[for='checkbark']::before {
  content: '\2611  ';
}

<input type="checkbox" class="title" id="checkbark">
<h3 class="bark">Bark Bark</h3>
<label for="checkbark">Hear a dog</label>

此代码片段利用了复选框的标签不一定要出现在复选框旁边这一事实。因此，我们将复选框放在h3上方，将标签放在下方。
我还为标签添加了一些装饰，使其看起来像复选框在那个位置，但这只是表面上的；您可以选择不使用它。

- Mr Lister

---

这是正确的答案！顺便说一下，我喜欢勾号符号 :) 我还会在label元素中添加user-select: none，但那只是外观上的。 - Vucko

这个确实可行，但有更短的答案也是正确的，使得这个答案已经过时了。 - OneStig

@StigCoder04 这是你的观点。这个答案大多数类似于 OP 的输出（带有标签上方的 h3）。 - Mr Lister

Answer 5

HTML

<h3 class="bark" id="bark" onclick="showtag()">Bark Bark</h3>
<input type="checkbox" class="title">Hear a dog</input>

JavaScript

<script language="javascript">
    function showtag() {
        var showme = document.getelementbyid("bark");
        showme.style.visibility = "visible";
    }
</script>

- Varun Rao

Answer 6

    <h3 class="bark"><a href="#" id="id1">Bark Bark</a></h3>
<input type="checkbox" class="title">Hear a dog</input>
<script>$('#id1').click(function () {
            if($(".title").is(':checked')){
                $('.title').css('visibility','visible');                    
            }else{
                $('.title').css('visibility','hidden');                                             
            }
        });</script>

请包含任何jquery min js并尝试此代码：

- Digpal Singh

---

这个应该怎么工作？如果你点击h3，它实际上会使复选框不可见。 - Mr Lister