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

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>

图片转代码服务由CSDN问答提供 功能建议

下面我有一个简单的表格，有4个复选框作为座位，我想做的是当访客选择 让我们说一个带有ID A2和A4的座位复选框我想要那些ID，并且在点击一个名为id =“demo”的段落内并且单击一下按钮后立即显示总值时，总值 应该在名为$ TotalCost的变量中分配。

谢谢。 

 ＆lt;！DOCTYPE html＆gt; 
＆lt; html＆gt; 
＆lt; 正文＆gt; 
＆lt; h2＆gt;请选择要预订的座位＆lt; / h2＆gt; 
＆lt; form action =“/ action_page.php”method =“post”＆gt; 
＆lt; input type =“checkbox”name =“vehicle”  id =“A1”value =“$ 100”＆gt; $ 100＆lt; br＆gt; 
＆lt; input type =“checkbox”name =“vehicle”id =“A2”value =“$ 65”＆gt;  $ 65＆lt; br＆gt; 
＆lt; input type =“checkbox”name =“vehicle”id =“A3”value =“$ 55”＆gt;  $ 55＆lt; br＆gt; 
＆lt; input type =“checkbox”name =“vehicle”id =“A4”value =“$ 50”＆gt;  $ 50＆lt; br＆gt; 
 
 
 
＆lt; p id =“demo”＆gt; 
选择席位
＆lt; br＆gt; 
＆lt; br＆gt; 
总计：USD＆lt; input type =“submit”  value =“立即预订”＆gt; 
＆lt; / form＆gt; 
 
＆lt; / p＆gt; 
 
＆lt; script＆gt; 
document.getElementById（“A1”）。addEventListener（“click”，displayCheck）; 
  
 * displayCheck（）{
 document.getElementById（“demo”）。innerHTML =; 
} 
 
＆lt; / script＆gt; 
＆lt; / body＆gt; 
＆lt; / html＆gt;
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

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条)

报告相同问题？

提交

相关推荐 更多相似问题