Question

初学者。
我的功能正在运行，但目前它显示已经删除的复选框我想点击下拉以查看方框救命啊！

<style>
  .multiselect {
    width: 450px;
  }

  .selectBox {
    position: relative;
  }

  .selectBox select {
    width: 100%;
    font-weight: bold;
  }

  .overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  #checkboxes {
    display: none;
    border: 1px #dadada solid;
  }

  #checkboxes label {
    display: block;
  }

  #checkboxes label:hover {
    background-color: #1e90ff;
  }
</style>

这是第二部分，我不确定我做错了什么，任何帮助都会受到高度赞赏。这是HTML。

<div class="multiselect">
  <div class="selectBox" onclick="showCheckboxes(0)">
    <select>
      <option>Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div id="checkboxes-0">
    <input type="checkbox" name="at0[]" id="one" value="red" />red
    <input type="checkbox" name="at0[]" id="two" value="blue" />blue
    <input type="checkbox" name="at0[]" id="three" value="green" />green


<script>
  var cbOneExpanded = false;
  var cbTwoExpanded = false;

  function showCheckboxes(id) {
    var checkboxes = document.getElementById('checkboxes-' + id);

    if (id > 0) {
      if (!cbTwoExpanded) {
        checkboxes.style.display = 'block';
        cbTwoExpanded = true;
      } else {
        checkboxes.style.display = 'none';
        cbTwoExpanded = false;
      }
    } else {
      if (!cbOneExpanded) {
        checkboxes.style.display = 'block';
        cbOneExpanded = true;
      } else {
        checkboxes.style.display = 'none';
        cbOneExpanded = false;
      }
    }
  }
</script>

再次感谢。

Answer 1

你快到了。首先隐藏包含框的div，然后在js函数中显示div。

＆＃13;

  var cbOneExpanded = false;
  var cbTwoExpanded = false;

  function showCheckboxes(id) {
    var checkboxes = document.getElementById('checkboxes-' + id);
    var x = document.getElementById('checkboxes-0');
    x.style.display = "block";
    
    if (id > 0) {
      if (!cbTwoExpanded) {
        checkboxes.style.display = 'block';
        cbTwoExpanded = true;
      } else {
        checkboxes.style.display = 'none';
        cbTwoExpanded = false;
      }
    } else {
      if (!cbOneExpanded) {
        checkboxes.style.display = 'block';
        cbOneExpanded = true;
      } else {
        checkboxes.style.display = 'none';
        cbOneExpanded = false;
      }
    }
  }

＆＃13;

 .multiselect {
    width: 450px;
  }

  .selectBox {
    position: relative;
  }

  .selectBox select {
    width: 100%;
    font-weight: bold;
  }

  .overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  #checkboxes {
    display: none;
    border: 1px #dadada solid;
  }

  #checkboxes label {
    display: block;
  }

  #checkboxes label:hover {
    background-color: #1e90ff;
  }

＆＃13;

                    <div class="multiselect">
                      <div class="selectBox" onclick="showCheckboxes(0)">
                        <select>
                          <option>Select an option</option>
                        </select>
                        <div class="overSelect"></div>
                      </div>
                      <div id="checkboxes-0" style='display:none'>
                        <input type="checkbox" name="at0[]" id="one" value="red"/>red
                        <input type="checkbox" name="at0[]" id="two" value="blue"/>blue
                        <input type="checkbox" name="at0[]" id="three" value="green"/>green
And here is the rest

＆＃13;

Answer 2

检查一下。我不知道这是你在找什么，但它正在发挥作用。

 <script>
  $(document).ready(function(){

    $("#checkboxes-0").css("display","none");

    flag = true;

    $(".selectBox").on("click",function(){
       if(flag){   
        $("#checkboxes-0").css("display","block");
        flag = false;
       }else{
        $("#checkboxes-0").css("display","none");
        flag = true;
       }


    });

  });
</script>

</head>
<body>

<style>
  .multiselect {
    width: 450px;
  }

  .selectBox {
    position: relative;
  }

  .selectBox select {
    width: 100%;
    font-weight: bold;
  }

  .overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  #checkboxes {
    display: none;
    border: 1px #dadada solid;
  }

  #checkboxes label {
    display: block;
  }

  #checkboxes label:hover {
    background-color: #1e90ff;
  }
</style>

<div class="multiselect">
  <div class="selectBox">
    <select>
      <option>Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div id="checkboxes-0">
     <input type="checkbox" name="at0[]" id="one" value="red" />red
     <input type="checkbox" name="at0[]" id="two" value="blue" />blue
     <input type="checkbox" name="at0[]" id="three" value="green" />green
    </div>

JavaScript复选框下拉样式无效

2 个答案: