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  
}

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

您应该在h3之后加input。并使用+符号使h3可见。

<强> Working Fiddle

Answer 3

＆＃13;

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

＆＃13;

#check_box{ 
  visibility: hidden;
}

＆＃13;

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

＆＃13;

Answer 4

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>

Answer 5

    <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并尝试此代码：

Answer 6

使用jQuery，你可以做到

if ($('.title:checked')){
    $('.bark').show();
}

单击复选框时如何显示标记

6 个答案: