要通过单击复选框隐藏按钮的ID /类

Question

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>

我想在检查ds-button-field时隐藏按钮checkbox->"toggle-1"。如何使用 css 并使用该按钮的ID /类名称？最初该按钮必须可见。

Answer 1

/* initial state */
.ds-button-field {
   display: block;
}

/* button hidden if the sibling checkbox is checked */
#toggle-1:checked ~ .ds-button-field {
   display: none;
}

旁注<input ...></input>应为<input ... />

Answer 2

.ds-button-field {
   display: block;
}
#toggle-1:checked ~ .ds-button-field {
   display: none;
}

Kepp两个相邻的输入按钮