问如何用JavaScript显示/隐藏基于复选框值的菜单？
EN

Stack Overflow用户

提问于 2018-10-02 03:58:25

回答 2查看 486关注 0票数 0

10/4/18更新：我已经更新了代码片段，以反映任何在寻求帮助时偶然发现此线程的人所做的更改。现有的复选框和新添加的复选框将打开/关闭菜单。

var statusChangeMenu, activeList, itemCheckBox, activeItems;
statusChangeMenu = document.getElementById("status-change-menu");
activeList = document.getElementById("active-items");
itemCheckBox = activeList.getElementsByClassName("item-checkbox");
activeItems = activeList.getElementsByClassName("active-item-text");

function addNewItem(event) {
  event.preventDefault();
  activeList.insertAdjacentHTML("afterbegin", "\
<li class=\"item\">\
  <input class=\"item-checkbox\" type=\"checkbox\" name=\"checkbox\" />\
  <span class=\"active-item-text\"></span>\
  <button class=\"btn-complete\">complete</button>\
</li>");
  activeItems[0].textContent = document.getElementById("new-item-text").value;
}

document.getElementById("btn-add-item").addEventListener("click", addNewItem, false);
activeList.addEventListener("change", function() {
  var i, len;
  for (i = 0, len = itemCheckBox.length; i < len || (i = 0); ++i) {
    if (itemCheckBox[i].checked) {
      i = 40;
      break;
    }
  }
  statusChangeMenu.style.height = i + "px";
}, false);

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #393F4D;
}
header{
    background-color: #1D1E22;
    color: #FEDA6A;
    text-align: center;
    font-size: 10px;
}
main{
    background-color: #707070;
    max-width: 700px;
    margin: auto;
    margin-top: 20px;
    padding: 15px;
}
#status-change-menu{
    background-color: rgb(218, 123, 123);
    margin-top: 10px;
    height: 0px;
    overflow: hidden;
    transition: all .25s ease-in-out;
}
#status-change-menu>button>img{
    height: 40px;  
}
form{
    background-color: #D4D4DC;
    padding: 10px;
    text-align: right;
    box-shadow: 1px 1px 3px;
}
#new-item-text{
    width: 100%;
}
#btn-add-item{
    padding: 5px;
    box-shadow: 1px 1px 3px; 
}
.item-list-container{
    background-color: #D4D4DC;
    margin-top: 20px;
    box-shadow: 1px 1px 3px;
}
.item{
    background-color: rgb(165, 233, 222);
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr max-content;
    grid-template-rows: 30px;
    margin-top: 10px;
}
.item-checkbox{
    grid-column: 1/2; 
  width: 30px;
  margin:auto;
}
.active-item-text{
    grid-column: 2/3;
    background: rgb(252, 252, 252);
    overflow: hidden;
}
.btn-complete{
 grid-column: 3/4;
}
.item>input{
  height: 20px;
}

<body id="the-list">
    <header>
        <h1>The List V4</h1>
    </header>
    <main>
        <form action="#">
            <textarea name="textbox" id="new-item-text" cols="30" rows="1"></textarea>
            <button type="submit" id="btn-add-item">Add</button>
        </form>
        <div id="status-change-menu" class="change-menu">
          <h3>Status Change Menu</h3>
            <button class="btn-bar-hold">BTN1<img src="img/btn_hold.svg" alt=""></button>
            <button class="btn-bar-delete">BTN2<img src="img/btn_delete.svg" alt=""></button>
        </div>
        <div class="item-list-container">
            <ul id="active-items" class="item-list">
                <li class="item">
                  <input class="item-checkbox" type="checkbox" name="checkbox">
                  <span class="active-item-text">random text text random</span>
                  <button class="btn-complete">complete</button>
                </li>
                <li class="item">
                  <input class="item-checkbox" type="checkbox" name="checkbox">
                  <span class="active-item-text">random text text random</span>
                  <button class="btn-complete">complete</button>
                </li>
            </ul>
        </div>
    </main>
</body>

我正在开发一个简单的清单web应用程序，使用纯HTML，CSS，javascript。我整个周末都被困在一个地方。希望有人能澄清我遗漏了什么或者做错了什么。这就是我所在的地方。

My Goal

无论何时选中核对表(ul)中的一个项目(通过复选框)，都会有一个隐藏菜单滑出，其中包含用于操作所选项目的各种选项。如果选中列表中的任何复选框，则菜单必须保持可见。如果未选中任何复选框，则必须关闭菜单。

我卡住的地方是

我能够让菜单在checkbox的“更改”事件期间滑出，但我不能让菜单元素在最初的更改事件之后做出反应。在调试过程中，菜单元素似乎没有对复选框做出反应，而是处于“选中”状态，而只是简单地对正在更改的复选框做出反应。以下是我拥有的JS代码，但我已经测试了各种其他配置，但都没有成功。

代码笔与完整的代码和相关的JS代码片段如下。更新Codepen 10/4/18 https://codepen.io/skazx/pen/mzeoEO

var itemCheckBox = document.querySelectorAll('input[type="checkbox"]')
var statusChangeMenu = document.getElementById("status-change-menu")

for(var i = 0 ; i < itemCheckBox.length; i++){
  itemCheckBox[i].addEventListener("change", function(){

    if (!itemCheckBox.checked)
    {statusChangeMenu.style.height = "40px";}
    else 
    {statusChangeMenu.style.height = "0px";}
  })}

我已经读了几十篇不同的文章和文章，但大多数都与只有一个复选框或使用jquery有关。如果你需要更多的细节，请告诉我。谢谢!

javascript

for-loop

if-statement

checkbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-02 04:07:05

itemCheckBox引用的是querySelectorAll返回的NodeList，而不是单个元素，所以说itemCheckBox.checked没有什么意义。

您应该检查列表中的复选框是否已选中，您可以将其与.some()函数一起使用，如下所示：

这是一个有效的演示

for (var i = 0; i < itemCheckBox.length; i++) {
  itemCheckBox[i].addEventListener("change", function(event) {
    if (!event.target.checked) {
      statusChangeMenu.style.height = "40px";
    } else {
      statusChangeMenu.style.height = "0px";
    }
  });
}

var itemCheckBox = document.querySelectorAll('input[type="checkbox"]');
var statusChangeMenu = document.getElementById("status-change-menu");
function changeHandler (event) {
  // get the list of checkboxes in real time in case any were added to the DOM
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var anyChecked = [].some.call(checkboxes, function(checkbox) { return checkbox.checked; });
  // alternatively (instead of using .some()):
  // var anyChecked = false;
  // checkboxes.forEach(function (checkbox) {
  //   if (checkbox.checked) {
  //     anyChecked = true;
  //   }
  // });

  if (anyChecked) {
    statusChangeMenu.style.height = "40px";
  } else {
    statusChangeMenu.style.height = "0px";
  }
}
for (var i = 0; i < itemCheckBox.length; i++) {
  itemCheckBox[i].addEventListener("change", changeHandler);
}

for (var i = itemCheckBox.length; i < itemCheckBox.length + 2; i++) {
  // add some checkboxes dynamically
  var newCheckbox = document.createElement("input");
  var newLabel = document.createElement("label");
  newLabel.innerText = "Checkbox " + (i + 1);
  newCheckbox.type = "checkbox";
  // -- IMPORTANT-- bind event listener on dynamically added checkbox
  newCheckbox.addEventListener("change", changeHandler);
  newLabel.appendChild(newCheckbox);
  newLabel.appendChild(document.createElement("br"));
  document.body.appendChild(newLabel);
}

#status-change-menu {
  height: 0;
  background-color: red;
  overflow: hidden;
  color: white;
  font-weight: bold;
}

<div id="status-change-menu">I should be visible if any checkboxes are checked</div>
<label>Checkbox 1<input type="checkbox"/></label><br/>
<label>Checkbox 2<input type="checkbox"/></label><br/>
<label>Checkbox 3<input type="checkbox"/></label><br/>

票数 2

Stack Overflow用户

发布于 2018-10-02 04:18:46

mhodges是正确的，因为itemCheckBox是一个NodeList，而不是一个单独的元素。另一个问题是，您正在尝试测试已更改的框是否已选中，如果未选中，则关闭菜单。正如您所描述的，这不是您想要的。

在关闭菜单之前，您需要另一种方法来检查是否已取消选中所有复选框。要做到这一点，一种简单的方法是在onChange函数中使用另一个内部循环：

for(var i = 0 ; i < itemCheckBox.length; i++){
  itemCheckBox[i].addEventListener("change", function(){
    showMenu = false
    for(var j = 0; j < itemCheckBox.length; j++)
      {
        if(itemCheckBox[j].checked)
          showMenu = true
      }
    if (showMenu)
      {statusChangeMenu.style.height = "40px";} 
    else 
      {statusChangeMenu.style.height = "0px";}
})}

这是一个修改后的Snippet

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52598048

复制

相似问题

问如何用JavaScript显示/隐藏基于复选框值的菜单？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用JavaScript显示/隐藏基于复选框值的菜单？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用JavaScript显示/隐藏基于复选框值的菜单？
EN