CSS隱藏div與外面的單選按鈕

Question

我想通過css隱藏div。 div hide是在窗體內工作的，這怎麼可以在窗體之外完成，甚至是在div之外？

HTML

<div class="row"> 
    <form> 
     <input type="radio" name="radio" value="show" checked/>Show <br> 
     <input type="radio" name="radio" value="hide"/>Hide 

     <div class="hideDiv"> 
      <p>Can you see me</p> 
     </div> 
    </form> 
</div> 

CSS

input[type=radio][value="hide"]:checked ~ .hideDiv { 
    display: none; 
} 

最好只CSS但JavaScript也是一種選擇。

Answer 1

也許類似這段代碼會有幫助嗎？

<input type="radio" name="radio" onclick="hideFunc();" value="show" checked/>Show <br> 
<input type="radio" name="radio" onclick="hideFunc();" value="hide"/>Hide 
<script> 
hideFunc = function() { 
    if (document.getElementsByClassName('hideDiv')[0].style.display == "none") 
     document.getElementsByClassName('hideDiv')[0].style.display = "block"; 
    else 
     document.getElementsByClassName('hideDiv')[0].style.display = "none"; 
} 
</script> 

Answer 2

你可以試試這個：

喜愛

我試圖隱藏通過CSS一個div。 div hide在窗體內部工作，這怎麼可以在窗體之外完成，甚至是在div之外？

HTML

<div class="row"> 
    <form> 
     <input type="radio" name="radio" value="show" onclick="hideDiv();" checked/>Show <br> 
     <input type="radio" name="radio" onclick="hideDiv();" value="hide"/>Hide 

     <div class="hideDiv"> 
      <p>Can you see me</p> 
     </div> 
    </form> 
</div> 

JS

function hideDiv() { 
    var aux = $('input[name="radio"]:checked').val(); 
    if (aux == 'show'){ 
     $('.hideDiv').css("display","block"); 
    }else{ 
     $('.hideDiv').css("display","none"); 
    } 
} 

Answer 3

您可以輕鬆地使用jQuery

$('.chkToogle').click(function(){ 
 
\t $('.hideDiv').fadeToggle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <form> 
 
     <input type="checkbox" class="chkToogle" checked/>Show/Hide 
 
\t \t </form> 
 
</div> 
 
<div class="hideDiv"> 
 
\t <p>Can you see me</p> 
 
</div>

Answer 4

使用CS少做S特異性。

.hideDiv { 
    display: none; 
}