複選框當我點擊另一個複選框時隱藏一個div

Question

我確定有一個簡單的解決方案。我有兩個標籤與兩個複選框相關聯，每個標籤顯示其對應的div。事情是我必須隱藏div1，當我點擊checkbox2並顯示div2時，反之亦然。

/* Default State */ 
 
.hombres, .mujers{ 
 
    display: none; 
 
} 
 
/* Toggled State */ 
 
input[type=checkbox]#hombre:checked ~ div.hombres { 
 
    display:block; 
 
    background-color: #f04e10; 
 
} 
 
input[type=checkbox]#mujer:checked ~ div.mujers { 
 
    display:block; 
 
    background-color: #f04e10; 
 
} 
 
input[type=checkbox]#hombre:checked ~ div.mujers { 
 
    display: none; 
 
} 
 
input[type=checkbox]#mujer:checked ~ div.hombres { 
 
    display: none; 
 
}

<label for="hombre">Hombre</label> 
 
<input type="checkbox" id="hombre"> 
 
<label for="mujer">Mujer</label> 
 
<input type="checkbox" id="mujer"> 
 
<div class="hombres"><p>Hombre</p></div> 
 
<div class="mujers"><p>Mujer</p></div>

任何想法？

Answer 1

更改複選框單選按鈕，像這樣同一個名字：
^jsfiddle.net

/* Default State */ 
 
.hombres, .mujers{ 
 
    display: none; 
 
} 
 
/* Toggled State */ 
 
input[type=radio]#hombre:checked ~ div.hombres { 
 
    display:block; 
 
    background-color: #f04e10; 
 
} 
 
input[type=radio]#mujer:checked ~ div.mujers { 
 
    display:block; 
 
    background-color: #f04e10; 
 
} 
 
input[type=radio]#hombre ~ div.mujers { 
 
    display: none; 
 
} 
 
input[type=radio]#mujer ~ div.hombres { 
 
    display: none; 
 
}

<label for="hombre">Hombre</label> 
 
<input type="radio" id="hombre" name="demo"> 
 
<label for="mujer">Mujer</label> 
 
<input type="radio" id="mujer" name="demo"> 
 
<div class="hombres"><p>Hombre</p></div> 
 
<div class="mujers"><p>Mujer</p></div>