drsxzut183207938 2018-07-19 23:32
浏览 660
已采纳

JavaScript CheckBox addEventListener（）

Below i have simple form that have 4 checkbox act as seats, What i am trying to do is when a visitor choose lets say a seat checkbox with ID A2 and A4 i want those ID and there total value to be shown instantly after clicked inside a paragraph with which have a name called id="demo" and when a button Reserve Now has been clicked the total value should be assigned in variable called $TotalCost.

Thanks.

<!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>
  • 写回答

2条回答 默认 最新

  • douke6424 2018-07-20 00:03
    关注

    This should get you started. You'll need to add a bit of code to get the checkboxes working as you expect; I used a selections object to keep track of which items have been selected. When a checkbox is clicked on, the item values are added to the object. When the checkbox is off, the item is deleted from the object. Whenever an action happens, the DOM is updated with all relevant information.

    I'm not contending that this code is the best, most efficient, or only way to go; just a quick sketch to give you the idea. You'll need another event listener for your submit button to handle sending the total to your PHP script. I'll leave that as an exercise.

    Note that you have some invalid HTML structure that you should correct.

    const selections = {};
const inputElems = document.getElementsByTagName("input");
const totalElem = document.getElementById("total-container");
const seatsElem = document.getElementById("selected-seats");

for (let i = 0; i < inputElems.length; i++) {
    if (inputElems[i].type === "checkbox") {
        inputElems[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];
    }

    const result = [];
    let total = 0;

    for (const key in selections) {
        result.push(selections[key].name + " " + selections[key].value);
        total += parseInt(selections[key].value.substring(1));
    }

    totalElem.innerText = total;
    seatsElem.innerHTML = result.join("<br>");
}
    <!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 id="demo">
        Selected Seat(s)
        <br>
        <span id="selected-seats"></span> <!-- container for selected seats -->
        <br>
        Total: <span id="total-container"></span> USD  <input type="submit" value="Reserve Now">
      </p>
    </form>
        
  </body>
</html>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效