html - 通过单击复选框显示/隐藏 div，不起作用

Question

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

`.ds-drop-down` {
    background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
    padding: 10px 5px;
    height: 0px;
    width: 8px;
    position: absolute;
    top: 63px;
    border: 1px solid blue;
}

.ds-btn {
    height: 22px;
    width: 20px;
    padding: 4px;
    top: 63px;
    position: absolute;
    border: 1px solid blue; 
    left: 579px;  
}

#span-advanced-search {
    border: 2px solid blue;

    left: 20px;
    width: 600px;
    padding: 10px;
}

input[type=checkbox]:checked ~ div {
    background: green;
   display: block;
   visibility: visible;
   position: absolute;
    width: 600px;
    padding: 10px;
}

<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>
</div>

我想通过点击 checkbox->'toggle-1' 来显示 div-> 'span-advanced-search'。最初 div 将被隐藏，当 checkbox 未选中时 div 也必须被隐藏。我在上面分享了我的代码片段，它不起作用，当我点击 checkbox 时 div 没有显示。请帮助我。

Answer 1

我不确定这是否是您要找的，但希望它能对您有所帮助。

$(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).attr("value")=="checkbox"){
                $("#span-advanced-search").toggle();
            }
          });
    });

#span-advanced-search{
  padding: 20px;
  display: none;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <label><input type="checkbox" name="colorCheckbox" value="checkbox"></label>
</div>
<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>
</div>