将addEventListener添加到多个复选框

Question

将addEventListener添加到多个复选框

4

下面是一个简单的表格，其中有4个复选框作为座位。我想做的是当访客选择了带有ID A2和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>

- Wilson

好的，你可能不想在值中使用美元符号，这样你就可以执行数学函数。 - Devon

2

看起来这似乎是一个很少付出努力的任务。那个是明天早上要交的？ - Louys Patrice Bessette

@Devon：我认为OP还没有考虑到服务器端的安全问题。这只是一个简单的数学加法，这是预期的。 - Louys Patrice Bessette

请参考[ask]和特别是[mcve]。 - user1531971

@LouysPatriceBessette 不是任务啦。我在尝试着想一个公交车座位预订系统的实现方案。 - Wilson

2个回答

1

这是一个入门级别的关于数学加法的内容。由于你的问题标记了jQuery，这里提供一种jQuery的方法。

需要注意的是，表单只会发送像{vehicle：['on'，''，'on'，'on']}这样的东西...这远远不是任何人想要发送到服务器的内容。但那是另一个问题。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </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>

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

    <script>
    $(document).ready(function(){
      
      var total=0;
      var seats=[];
      $("form input").on("click",function(){
        var id=$(this).attr("id");
        if($(this).is(":checked")){
          total+=parseInt($(this).val());
          seats.push(id);
        }else{
          total-=parseInt($(this).val());
          seats.splice(seats.indexOf(id),1);
        }
        $("#demo").text(total.toFixed(2));
        $("#seats").html(seats.sort().join(","));
      });

    });
    </script>
  </body>
</html>

- Louys Patrice Bessette

不错的解决方案，兄弟。但是如果我想显示选中的座位怎么办？比如显示A1或A4，而不仅仅是总价？ - Wilson

现在看起来很好，非常感谢。那么，如果我想将总值和所选座位的值传递到我的 my-action-page.php 页面进行进一步处理，该怎么办呢？我发现很难将一个变量从 JQuery 传递到 PHP。 - Wilson

寻找Ajax...这方面需要稍微阅读一些资料。有很多示例和教程可供参考。 - Louys Patrice Bessette

让我过一遍。 - Wilson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ggorlen · Accepted Answer

这里是一种设置复选框事件监听器的方法。使用document.querySelectorAll("input[type='checkbox']");从DOM中获取所有复选框元素，并使用循环为每个复选框添加监听器。一个selections对象可以跟踪已选中的项目。当单击复选框时，通过键将项目值添加到对象中。当复选框关闭时，该项目将从对象中删除。每当发生操作时，基于selections的内容，DOM都会更新所有相关信息。

这个例子只是一个快速的草图，让你有个大致了解。你需要为提交按钮添加另一个事件监听器来处理将表单数据发送到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)
  );
}

请参考事件代理，它可以在许多子元素上添加单个侦听器。