复选框当我点击另一个复选框时隐藏一个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>