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>