取消选中时隐藏

时间:2015-11-05 20:52:03

标签: javascript jquery

我的代码有一个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();
    }
  });
});

2 个答案:

答案 0 :(得分:2)

而不是手动确定何时显示或隐藏元素让jquery为你做“切换”api http://api.jquery.com/toggle/

$(document).ready(function() {

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

答案 1 :(得分:0)

&#13;
&#13;
$(document).ready(function() {

  $("#input-bracket").hide();
  $("#bracket").click(function() {
    if ($("#input-bracket").is(":visible")) {
      $("#input-bracket").hide();
    } else {
      $("#input-bracket").show();
    }
  });
});
&#13;
<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>
&#13;
&#13;
&#13;