css - 选中的 CSS 输入需要隐藏/显示 div

Question

我需要根据输入隐藏/显示两个 div，但它不起作用。当 INPUT 按钮在 div 之外时，它可以工作，但我需要将输入按钮保留在自己的 div 中。

div#doctorcard, div#facilitycard {
    display:none;
}
input#doctor:checked ~ div#doctorcard {
  display:block;
}

input#facility:checked ~ div#facilitycard {
  display:block;
}

<div>
<label for="doctor"><span>show</span></label>
<input type=checkbox id="doctor">

<label for="facility"><span>hide</span></label>    
<input type=checkbox id="facility">
</div>

<div>
    <div id="doctorcard">Zeeshan 1</div>
    <div id="facilitycard">Zeeshan 2</div>
</div>    
	

标签： css