close a div when a checkbox clicked with pure css

I am trying to close a div when a checkbox is clicked with css only not JQuery or Javascript but it seems not working properly. How can I adjust it?

In html,

<a href="#div-1"><input type="checkbox" checked></a>
<div id="div-1">          
     Here is the content. 
</div>

In css,

div[id^="div-"] {
    display: block;
}
div[id^="div-"]:target {
    display: none;
}

How can I link the click and the checkbox?