取消選中隱藏

Question

我的代碼有一個javascript，允許在選中輸入括號時顯示下拉列表，當我解開輸入括號時，它不會隱藏顯示的下拉列表。如果這與其他帖子相同，但他們不適合我。

下面的代碼

<input type="checkbox" class="ba" name="ab" <?php if (isset($ab) && $ab=="20") echo "checked";?> value="20">20s 
<br> 
<input type="checkbox" class="ba" name="ab" <?php if (isset($ab) && $ab=="30") echo "checked";?> value="30">30s 
<br> 
<input type="checkbox" class="ba" name="ab" <?php if (isset($ab) && $ab=="40") echo "checked";?> value="40">40s        
<br> 
<input type="checkbox" class="ba" name="ab" <?php if (isset($ab) && $ab=="50") echo "checked";?> value="50">50s        
<br> 
<input type="checkbox" class="ba" name="ab" <?php if (isset($ru) && $ru=="all") echo "checked";?> value="All" onClick="toggle3(this)">All Ages 
<br> 
<script src="assets/js/jquery.min.js"></script> 
<input type="checkbox" class="ba" name="ib" id="bracket" value="All">Input Bracket 
<br> 
<div id='input-bracket'> 
<select name="sab" class="req" id="age-range" style="width:50px; height:30px;" autocomplete="off" required/> </select> - 
<select name="sab" class="req" id="second" style="width:50px; height:30px;" autocomplete="off" required/> </select></div> 

$(document).ready(function() { 

$("#input-bracket").hide(); 
$("input[class=ba]").click(function() { 
    if ($(this).attr("id") == "bracket") { 
     $("#input-bracket").show(); 
    } else { 
     $("#input-bracket").hide(); 
    } 
    }); 
}); 

Answer 1

不用手動搞清楚何時顯示或隱藏元素讓jQuery的爲你做它用它的 '切換' API http://api.jquery.com/toggle/

$(document).ready(function() { 

$("#input-bracket").hide(); 
$("input[class=ba]").click(function() { 
    $("#input-bracket").toggle(); 
    }); 
}); 

Answer 2

$(document).ready(function() { 
 

 
    $("#input-bracket").hide(); 
 
    $("#bracket").click(function() { 
 
    if ($("#input-bracket").is(":visible")) { 
 
     $("#input-bracket").hide(); 
 
    } else { 
 
     $("#input-bracket").show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="checkbox" class="ba" name="ab" value="20">20s 
 
<br> 
 
<input type="checkbox" class="ba" name="ab" value="30">30s 
 
<br> 
 
<input type="checkbox" class="ba" name="ab" value="40">40s 
 
<br> 
 
<input type="checkbox" class="ba" name="ab" value="50">50s 
 
<br> 
 
<input type="checkbox" class="ba" name="ab" value="All" onClick="toggle3(this)">All Ages 
 
<br> 
 

 
<input type="checkbox" class="ba" name="ib" id="bracket" value="All">Input Bracket 
 
<br> 
 
<div id='input-bracket'> 
 
    <select name="sab" class="req" id="age-range" style="width:50px; height:30px;" autocomplete="off" required/></select>- 
 
    <select name="sab" class="req" id="second" style="width:50px; height:30px;" autocomplete="off" required/></select> 
 
</div>