Want to hide a button by it's id/class, by clicking a checkbox

input[type=checkbox]:checked ~ div#span-advanced-search {
    background: white;
    display: block;
    position: relative;
    width: 564px;
    padding: 10px;
    visibility: visible;
    left: -573px;
    top: 11px;
}

<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1"></input>

<div id="span-advanced-search">
        <label>Education Level:</label> <input type="text"/><br></br>
        <label>Type of Learning Material:</label> <input type="text"/><br></br>
        <label>Difficulty Level:</label> <input type="text"/><br></br>
        <label>Author:</label> <input type="text"/><br></br>
        <input class="ds-button-field " name="submit" type="submit" i18n:attr="value" value="xmlui.general.go">
                  <xsl:attribute name="onclick">
                  <xsl:text>
                       var radio = document.getElementById(&quot;ds-search-form-scope-container&quot;);
                       if (radio != undefined &amp;&amp; radio.checked)
                       {
                             var form = document.getElementById(&quot;ds-search-form&quot;);
                             form.action=
                   </xsl:text>
                             <xsl:text>&quot;</xsl:text>
                             <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='contextPath']"/>
                             <xsl:text>/handle/&quot; + radio.value + &quot;</xsl:text>
                             <xsl:value-of select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[@element='search'][@qualifier='simpleURL']"/>
                             <xsl:text>&quot; ; </xsl:text>
                             <xsl:text>

                                   }
                             </xsl:text>
                      </xsl:attribute>

     </input>                     
</div>


<input class="ds-button-field " name="submit" type="submit" i18n:attr="value"
                                       value="xmlui.general.go">
                
</input>

I want to hide the button "ds-button-field" when i am checking the checkbox->"toggle-1".How can i do that using css and using id/class name of that button? Initially that button must be visible.Please help.