Question

你好（（如果没有勾选复选框，你可以帮我看看或隐藏我的选项

）

这是代码

<label>Busy</label>:</label><br><br>
<div class="checkbox checkbox-info">
     <input type="checkbox" name="busy"  id="busy" value="busy">
     <label for="busy">Busy</label>
</div><br>
<div id="dropdownHolder">
    <label>Add Time</label>:
    <div class="row">
        <div class="col-md-6">
            <select id="time">
                <option value = "30min">30 minute</option>
                <option value ="1hr">1 hour</option>
                <option value ="1hr30min">1 hour 30minute</option>
                <option value ="2hr">2 hour</option>
            </select>
        </div>
    </div>
</div>

这是jQuery

<script type="text/javascript">

$(function(){

    //initially all dropdowns are hidden
    $('#dropdownHolder select').hide();
    $('input:checkbox').click(function(){
        var isOnCall = $('.OnCall:checked').length,
            anyOther = $('.other:checked').length;
        $('#dropdownHolder select').hide();
        if (isOnCall > 0 &&  anyOther > 0){
            $('#time').show();
        }

    })


});
</script>

jquery不是我的，我只是复制粘贴它。即使我已经选中框，我也无法显示选项菜单你能帮我解决这个问题吗？

Answer 1

$('#dropdownHolder select').hide(); //initially dropdown is hidden
$('#busy').change(function() { //change click to hidden

  if ($(this).is(':checked')) { //check if checkbox is checked
    $('#dropdownHolder select').show(); //show if checked
  } else {
    $('#dropdownHolder select').hide(); //hide if unchecked
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Busy</label>:</label>
<br>
<br>
<div class="checkbox checkbox-info">
  <input type="checkbox" name="busy" id="busy" value="busy">
  <label for="busy">Busy</label>
</div>
<br>
<div id="dropdownHolder">
  <label>Add Time</label>:
  <div class="row">
    <div class="col-md-6">
      <select id="time">
        <option value="30min">30 minute</option>
        <option value="1hr">1 hour</option>
        <option value="1hr30min">1 hour 30minute</option>
        <option value="2hr">2 hour</option>
      </select>
    </div>
  </div>
</div>

更改事件单击以更改事件。使用复选框时，最好使用change event。
if (isOnCall > 0 && anyOther > 0){不需要这种情况，可能是复制粘贴错误。
要检查复选框是否已选中，您可以使用$(':checkbox').is(':checked')条件

Answer 2

这可能对你有用。我现在很着急，因此没有深入研究。请修改代码中的内容以获得正确的工作

$(document).ready(function(){
//$('#dropdownHolder select').hide();
$('#busy').click(function(e){
    if ($(this).is(':checked')) { //check if checkbox is checked
        open($('#dropdownHolder select'));
    } else {
        $('#dropdownHolder select').trigger("click");; //hide if unchecked
    }

});

function open(elem) {
if (document.createEvent) {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    elem[0].dispatchEvent(e);
} else if (element.fireEvent) {
    elem[0].fireEvent("onmousedown");
}
}

});

如果选中chekbox，如何显示或隐藏下拉列表

2 个答案: