时间戳

首页 > 解决方案 > addEventListener 到多个复选框

javascript - addEventListener 到多个复选框

问题描述

下面，我有一个简单的表单，其中有 4 个复选框作为座位。我想要做的是，当访问者选择带有 IDA2和的座位复选框时A4，我希望在单击名称为 的段落后立即显示这些 ID 及其总值id="demo"。单击 [立即预订] 按钮时，应将总值分配给名为 的变量$TotalCost。

我怎样才能做到这一点？这是我的代码：

<!DOCTYPE html>
<html>
<body>
<h2>Please choose a seat to book</h2>
<form action="/action_page.php" method="post">
<input type="checkbox" name="vehicle" id="A1" value="$100">$100<br>
<input type="checkbox" name="vehicle" id="A2" value="$65"> $65<br>
<input type="checkbox" name="vehicle" id="A3" value="$55"> $55<br>
<input type="checkbox" name="vehicle" id="A4" value="$50"> $50<br>

<p id="demo">
Selected Seat(s)
<br>
<br>
Total: USD  <input type="submit" value="Reserve Now">
</form>

</p>

<script>
document.getElementById("A1").addEventListener("click", displayCheck);

function displayCheck() {
    document.getElementById("demo").innerHTML = ;
}

    </script>
    </body>
    </html>

标签： javascriptphpjqueryhtml

解决方案

这是在复选框上设置事件侦听器的一种方法。我曾经document.querySelectorAll("input[type='checkbox']");从 DOM 和一个循环中获取所有的复选框元素，以便为每个复选框添加一个侦听器。selections对象可以跟踪已检查的项目。单击复选框时，项目值将按键添加到对象中。当复选框关闭时，该项目将从对象中删除。每当一个动作发生时，DOM 都会根据selections.

这个例子只是一个简单的草图来给你一个想法。您的提交按钮需要另一个事件侦听器来处理将表单数据发送到您的 PHP 脚本。我会把它留作练习。

请注意，您提供的 HTML 无效，因为嵌套已损坏。HTML 验证器有助于解决此类问题。

var selections = {};
var checkboxElems = document.querySelectorAll("input[type='checkbox']");
var totalElem = document.getElementById("seats-total");
var seatsElem = document.getElementById("selected-seats");

for (var i = 0; i < checkboxElems.length; i++) {
  checkboxElems[i].addEventListener("click", displayCheck);
}

function displayCheck(e) {
  if (e.target.checked) {
    selections[e.target.id] = {
      name: e.target.name,
      value: e.target.value
    };
  } 
  else {
    delete selections[e.target.id];
  }

  var result = [];
  var total = 0;

  for (var key in selections) {
    var listItem = "<li>" + selections[key].name + " " +
                   selections[key].value + "</li>";
    result.push(listItem);
    total += parseInt(selections[key].value.substring(1));
  }

  totalElem.innerText = total;
  seatsElem.innerHTML = result.join("");
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>...</title>
</head>
<body>
  <h2>Please choose a seat to book</h2>
  <form action="/action_page.php" method="post">
    <input type="checkbox" name="vehicle" id="A1" value="$100">$100<br>
    <input type="checkbox" name="vehicle" id="A2" value="$65"> $65<br>
    <input type="checkbox" name="vehicle" id="A3" value="$55"> $55<br>
    <input type="checkbox" name="vehicle" id="A4" value="$50"> $50<br>
    <p>Selected Seat(s)</p>

    <!-- container for displaying selected seats -->
    <ul id="selected-seats"></ul>
    
    <div>
      Total: $<span id="seats-total">0</span> USD 
      <input type="submit" value="Reserve Now">
    </div>  
  </form>
</body>
</html>

通常，您需要动态生成元素并添加事件侦听器。这是一个玩具示例：

for (let i = 0; i < 1000; i++) {
  const checkbox = document.createElement("input");
  document.body.appendChild(checkbox);
  checkbox.type = "checkbox";
  checkbox.style.margin = 0;
  
  checkbox.addEventListener("mouseover", e => {
    e.target.checked = !e.target.checked;
  });
  
  checkbox.addEventListener("mouseout", e =>
    setTimeout(() => {
      e.target.checked = !e.target.checked;
    }, 1000)
  );
}

推荐阅读