当前位置： 文江博客话题详情

有没有办法打印签入表中的多个复选框的值而不覆盖另一个？

发布于 2025-01-17 01:46:06 字数 3996 浏览 3 评论 0原文

我想编写一个程序，要求提供披萨上的配料，并且我有 5 个配料，它们是复选框项目。我正在使用 getElementById 将结果打印到表内名为 t_options 的 id，我尝试使用 .innerhtml 来等于引用的文本，但这会覆盖打印的语句而不显示多个语句。我已经尝试在单个 if 结构中使用多个 topping 变量，但它也不起作用。

这是我当前用于复选框的代码。

var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;

if (t1 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML = "Pepperoni";
} else
  top = top;

if (t2 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML = "Sausage";
} else
  top = top;

if (t3 == true) {
  top = top + 1.5;
} else
  top = top;

if (t4 == true) {
  top = top + 1.5;
} else
  top = top;

if (t5 == true) {
  top = top + 1.5;
} else
  top = top;

document.getElementById("t_result").innerHTML = "$ " + top;
  table,
  th,
  td {
    border: 1px solid black;
  }
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <form id="order" name="order">
    <label for="first_last"> Name:</label>
    <input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>

    <p> Please choose your size of pizza:</p>

    <input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
    <input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
    <input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
    <input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>

    <p>Please choose your topping ($1.50 each): </p>
    <input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
    <input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
    <input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
    <input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
    <input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>

    <select onclick="getPizza(this)" name="pick_deliv" id="select_id">
      <option id="pick_deliv" value="Pickup">Pick up </option>
      <option value="Delivery">Delivery </option>
    </select> <br> <br>
  </form>

  <button onclick="getPizza()" id="btn1"> Confirm Order</button>
  <h1 id="name_result"> Your Order </h1> <br> <br>

  <table style="width:50%">
    <tr>
      <th>Description</th>
      <th>Option</th>
      <th>Price</th>
    </tr>

    <tr>
      <td> Size </td>
      <td id="s_result"> </td>
      <td id="p_result"> </td>
    </tr>
    <tr>
      <td> Toppings </td>
      <td id="t_options"> </td>
      <td id="t_result"> </td>
    </tr>
    <tr>
      <td> Pick-Up/Delivery</td>
      <td id="sel_opt"> </td>
      <td id="sel_price"> </td>
    </tr>
  </table>

  <h4 id="total_result">Your Current Total is $ </h4>
  <p id="demo"> </p>
</body>

</html>

原文

I have a program I want to write that asks for the toppings on a pizza and I have 5 toppings that are checkbox items. I am using getElementById to print the result to an id called t_options inside the table, I have tried useing .innerhtml to equal quoted text but that will overwrite the printed statement without displaying more than one. I already tried using more than topping variable inside a single if structure and it did not work either.

Here is the code I am currently using for the checkboxes.

var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;

if (t1 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML = "Pepperoni";
} else
  top = top;

if (t2 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML = "Sausage";
} else
  top = top;

if (t3 == true) {
  top = top + 1.5;
} else
  top = top;

if (t4 == true) {
  top = top + 1.5;
} else
  top = top;

if (t5 == true) {
  top = top + 1.5;
} else
  top = top;

document.getElementById("t_result").innerHTML = "$ " + top;
  table,
  th,
  td {
    border: 1px solid black;
  }
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <form id="order" name="order">
    <label for="first_last"> Name:</label>
    <input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>

    <p> Please choose your size of pizza:</p>

    <input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
    <input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
    <input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
    <input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>

    <p>Please choose your topping ($1.50 each): </p>
    <input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
    <input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
    <input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
    <input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
    <input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>

    <select onclick="getPizza(this)" name="pick_deliv" id="select_id">
      <option id="pick_deliv" value="Pickup">Pick up </option>
      <option value="Delivery">Delivery </option>
    </select> <br> <br>
  </form>

  <button onclick="getPizza()" id="btn1"> Confirm Order</button>
  <h1 id="name_result"> Your Order </h1> <br> <br>

  <table style="width:50%">
    <tr>
      <th>Description</th>
      <th>Option</th>
      <th>Price</th>
    </tr>

    <tr>
      <td> Size </td>
      <td id="s_result"> </td>
      <td id="p_result"> </td>
    </tr>
    <tr>
      <td> Toppings </td>
      <td id="t_options"> </td>
      <td id="t_result"> </td>
    </tr>
    <tr>
      <td> Pick-Up/Delivery</td>
      <td id="sel_opt"> </td>
      <td id="sel_price"> </td>
    </tr>
  </table>

  <h4 id="total_result">Your Current Total is $ </h4>
  <p id="demo"> </p>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

尸血腥色 2025-01-24 01:46:06

不要覆盖每个复选框的 t_options，而是用 += 附加到它。

var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;

// first empty the output element
document.getElementById("t_options").innerHTML = '';

if (t1 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML += "Pepperoni<br>";
} else
  top = top;

if (t2 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML += "Sausage<br>";
} else
  top = top;

if (t3 == true) {
  top = top + 1.5;
} else
  top = top;

if (t4 == true) {
  top = top + 1.5;
} else
  top = top;

if (t5 == true) {
  top = top + 1.5;
} else
  top = top;

document.getElementById("t_result").innerHTML = "$ " + top;
table,
  th,
  td {
    border: 1px solid black;
  }
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <form id="order" name="order">
    <label for="first_last"> Name:</label>
    <input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>

    <p> Please choose your size of pizza:</p>

    <input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
    <input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
    <input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
    <input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>

    <p>Please choose your topping ($1.50 each): </p>
    <input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
    <input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
    <input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
    <input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
    <input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>

    <select onclick="getPizza(this)" name="pick_deliv" id="select_id">
      <option id="pick_deliv" value="Pickup">Pick up </option>
      <option value="Delivery">Delivery </option>
    </select> <br> <br>
  </form>

  <button onclick="getPizza()" id="btn1"> Confirm Order</button>
  <h1 id="name_result"> Your Order </h1> <br> <br>

  <table style="width:50%">
    <tr>
      <th>Description</th>
      <th>Option</th>
      <th>Price</th>
    </tr>

    <tr>
      <td> Size </td>
      <td id="s_result"> </td>
      <td id="p_result"> </td>
    </tr>
    <tr>
      <td> Toppings </td>
      <td id="t_options"> </td>
      <td id="t_result"> </td>
    </tr>
    <tr>
      <td> Pick-Up/Delivery</td>
      <td id="sel_opt"> </td>
      <td id="sel_price"> </td>
    </tr>
  </table>

  <h4 id="total_result">Your Current Total is $ </h4>
  <p id="demo"> </p>
</body>

</html>

Instead of overwriting t_options for each checkbox, append to it with +=.

var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;

// first empty the output element
document.getElementById("t_options").innerHTML = '';

if (t1 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML += "Pepperoni<br>";
} else
  top = top;

if (t2 == true) {
  top = top + 1.5;
  document.getElementById("t_options").innerHTML += "Sausage<br>";
} else
  top = top;

if (t3 == true) {
  top = top + 1.5;
} else
  top = top;

if (t4 == true) {
  top = top + 1.5;
} else
  top = top;

if (t5 == true) {
  top = top + 1.5;
} else
  top = top;

document.getElementById("t_result").innerHTML = "$ " + top;
table,
  th,
  td {
    border: 1px solid black;
  }
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <form id="order" name="order">
    <label for="first_last"> Name:</label>
    <input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>

    <p> Please choose your size of pizza:</p>

    <input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
    <input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
    <input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
    <input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>

    <p>Please choose your topping ($1.50 each): </p>
    <input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
    <input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
    <input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
    <input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
    <input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>

    <select onclick="getPizza(this)" name="pick_deliv" id="select_id">
      <option id="pick_deliv" value="Pickup">Pick up </option>
      <option value="Delivery">Delivery </option>
    </select> <br> <br>
  </form>

  <button onclick="getPizza()" id="btn1"> Confirm Order</button>
  <h1 id="name_result"> Your Order </h1> <br> <br>

  <table style="width:50%">
    <tr>
      <th>Description</th>
      <th>Option</th>
      <th>Price</th>
    </tr>

    <tr>
      <td> Size </td>
      <td id="s_result"> </td>
      <td id="p_result"> </td>
    </tr>
    <tr>
      <td> Toppings </td>
      <td id="t_options"> </td>
      <td id="t_result"> </td>
    </tr>
    <tr>
      <td> Pick-Up/Delivery</td>
      <td id="sel_opt"> </td>
      <td id="sel_price"> </td>
    </tr>
  </table>

  <h4 id="total_result">Your Current Total is $ </h4>
  <p id="demo"> </p>
</body>

</html>

回复 原文
海夕 2025-01-24 01:46:06

巴马尔已经回答了问题的要点。但是，您还应该遵循 DRY（不要重复自己）原则：

function toppings(ev){
 const tops=[...document.querySelectorAll("[name^=topping]")]
 .filter(t=>t.checked)
 .map(t=>t.closest("label").textContent.trim());
 document.getElementById("t_options").innerHTML = tops.join(", ");
 document.getElementById("t_result").innerHTML = "$ "+tops.length*1.5;
}

document.querySelector("form").addEventListener("change",function(ev){
 if (ev.target.closest("label")) toppings(ev);
})
table,
  th,
  td {
    border: 1px solid black;
  }
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <form id="order" name="order">
    <label for="first_last"> Name:</label>
    <input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>

    <p> Please choose your size of pizza:</p>

    <input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
    <input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
    <input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
    <input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>

    <p>Please choose your topping ($1.50 each): </p>
    <label><input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </label><br>
    <label><input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </label><br>
    <label><input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </label><br>
    <label><input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </label><br>
    <label><input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </label><br> <br>

    <select name="pick_deliv" id="select_id">
      <option id="pick_deliv" value="Pickup">Pick up </option>
      <option value="Delivery">Delivery </option>
    </select> <br> <br>
  </form>

  <button onclick="getPizza()" id="btn1"> Confirm Order</button>
  <h1 id="name_result"> Your Order </h1> <br> <br>

  <table style="width:50%">
    <tr>
      <th>Description</th>
      <th>Option</th>
      <th>Price</th>
    </tr>

    <tr>
      <td> Size </td>
      <td id="s_result"> </td>
      <td id="p_result"> </td>
    </tr>
    <tr>
      <td> Toppings </td>
      <td id="t_options"> </td>
      <td id="t_result"> </td>
    </tr>
    <tr>
      <td> Pick-Up/Delivery</td>
      <td id="sel_opt"> </td>
      <td id="sel_price"> </td>
    </tr>
  </table>

  <h4 id="total_result">Your Current Total is $ </h4>
  <p id="demo"> </p>
</body>

</html>

Barmar already answered the key points of the question. However, you should also follow the DRY (don't repeat yourself) principle:

function toppings(ev){
 const tops=[...document.querySelectorAll("[name^=topping]")]
 .filter(t=>t.checked)
 .map(t=>t.closest("label").textContent.trim());
 document.getElementById("t_options").innerHTML = tops.join(", ");
 document.getElementById("t_result").innerHTML = "$ "+tops.length*1.5;
}

document.querySelector("form").addEventListener("change",function(ev){
 if (ev.target.closest("label")) toppings(ev);
})
table,
  th,
  td {
    border: 1px solid black;
  }
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <form id="order" name="order">
    <label for="first_last"> Name:</label>
    <input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>

    <p> Please choose your size of pizza:</p>

    <input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
    <input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
    <input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
    <input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>

    <p>Please choose your topping ($1.50 each): </p>
    <label><input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </label><br>
    <label><input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </label><br>
    <label><input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </label><br>
    <label><input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </label><br>
    <label><input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </label><br> <br>

    <select name="pick_deliv" id="select_id">
      <option id="pick_deliv" value="Pickup">Pick up </option>
      <option value="Delivery">Delivery </option>
    </select> <br> <br>
  </form>

  <button onclick="getPizza()" id="btn1"> Confirm Order</button>
  <h1 id="name_result"> Your Order </h1> <br> <br>

  <table style="width:50%">
    <tr>
      <th>Description</th>
      <th>Option</th>
      <th>Price</th>
    </tr>

    <tr>
      <td> Size </td>
      <td id="s_result"> </td>
      <td id="p_result"> </td>
    </tr>
    <tr>
      <td> Toppings </td>
      <td id="t_options"> </td>
      <td id="t_result"> </td>
    </tr>
    <tr>
      <td> Pick-Up/Delivery</td>
      <td id="sel_opt"> </td>
      <td id="sel_price"> </td>
    </tr>
  </table>

  <h4 id="total_result">Your Current Total is $ </h4>
  <p id="demo"> </p>
</body>

</html>

回复 原文
~没有更多了~

关于作者

灼疼热情

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文