javascript 获取所有选中的复选框并使用它们创建li元素不起作用

omtl5h9j 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(173)

我正在尝试获取所有选中的复选框并创建li元素。我希望li元素在复选框被选中时立即显示。我可以在input中不使用value属性来实现这一点吗？我已经找到了一种方法来处理value，但在我的代码中不起作用。
我有这个密码

const checkboxes = document.getElementsByTagName('input').type == 'checkbox';

function getChecked() {
    let checked = [];

    for (let i = 0; i < checkboxes.length; i++) {
        let checkbox = checkboxes[i];
        
        if (checkbox.checked) {
            const rightBox = document.getElementsByClassName('main-container-2')[0];
            const newDiv = document.createElement('div');
            rightBox.appendChild(newDiv);
            
            const ul = document.createElement('ul');
            newDiv.appendChild(ul);
            const li = document.createElement('li');
            ul.appendChild(li);

            const label = document.createElement('label');
            li.innerHTML = label.innerHTML;
          }
        }

        return checked;
    };

getChecked();

<div class="article-main">
  <div class="article-left">
      <div>
          <input type="checkbox" id="checkbox1">
          <label for="checkbox1">Onion</label>
      </div>
      <div>
          <input type="checkbox" id="checkbox2">
          <label for="checkbox2">Spring Onion</label>
      </div>
      <div>
          <input type="checkbox" id="checkbox3">
          <label for="checkbox3">Egg</label>
      </div>
   </div>
</div>

这张图片是我的目标。

JavaScript

来源：https://stackoverflow.com/questions/75305973/getting-all-checked-checkboxes-and-creating-li-elements-with-them-is-not-working

2条答案

按热度按时间

lb3vh1jj1#

您的复选框选择是错误的，所以我修复了它摆在首位。
您应该在所有复选框中添加一个onclick函数。
在该函数中，您应该清空列表并遍历所有复选框。
选中复选框后，将li添加到列表中。
下面的代码可以工作。

const checkboxes = document.querySelectorAll('input[type=checkbox]');

function getChecked() {
    let checked = [];
    const ul = document.getElementById('ingredients');
    ul.innerHTML = "";
    for (let i = 0; i < checkboxes.length; i++) {
        let checkbox = checkboxes[i];
        if (checkbox.checked) {
            const li = document.createElement('li');
            li.innerHTML = document.querySelector('label[for="' + checkbox.id + '"]').textContent.trim();
            ul.appendChild(li);
         }
      }
      return checked;
};

<div class="article-main">
  <div class="article-left">
      <div>
          <input type="checkbox" onclick="getChecked()" id="checkbox1">
          <label for="checkbox1">Onion</label>
      </div>
      <div>
          <input type="checkbox" onclick="getChecked()" id="checkbox2">
          <label for="checkbox2">Spring Onion</label>
      </div>
      <div>
          <input type="checkbox" onclick="getChecked()" id="checkbox3">
          <label for="checkbox3">Egg</label>
      </div>
   </div>
</div>
<br/>
your ingredients
<ul id="ingredients">

</ul>

赞(0）回复(0）举报 2023-02-02

nhaq1z212#

我给予个例子供大家参考：

document.addEventListener("DOMContentLoaded", function(event) {
  const checkBoxes = document.querySelectorAll("input[type=checkbox]");
  for (let i = 0; i < checkBoxes.length; i++) {
    let checkBox = checkBoxes[i];
    checkBox.addEventListener("click", e => {
      if (e.target.checked) {
        const rightBox = document.getElementsByClassName('main-container-2')[0];
        const newDiv = document.createElement('div');
        rightBox.appendChild(newDiv);

        const ul = document.createElement('ul');
        newDiv.appendChild(ul);
        const li = document.createElement('li');
        ul.appendChild(li);

        let l=e.target.nextElementSibling;
        li.innerHTML = l.innerHTML;
      }
    });
  }
});

<div class="article-main">
  <div class="article-left">
    <div>
      <input type="checkbox" id="checkbox1">
      <label for="checkbox1">Onion</label>
    </div>
    <div>
      <input type="checkbox" id="checkbox2">
      <label for="checkbox2">Spring Onion</label>
    </div>
    <div>
      <input type="checkbox" id="checkbox3">
      <label for="checkbox3">Egg</label>
    </div>
  </div>
</div>
<div class="main-container-2">
</div>

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 获取所有选中的复选框并使用它们创建li元素不起作用

2条答案

相关问题

热门标签

最新问答