獲取javascript中輸入類型復選框中所有復選框的值

Question

我做了一個函數來獲取復選框的值並將所有值放在輸入字段中。 但是我在結果中遇到問題，我想刪除最后一個逗號。 我試過切片但沒有成功。 請幫幫我。

<!DOCTYPE html>
<html>
<body>

<p>How would you like your coffee?</p>

<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" value="100">With cream<br>
<input type="checkbox" name="coffee" value="150">With sugar<br>
<input type="checkbox" name="coffee" value="200">With milk<br>
<input type="checkbox" name="coffee" value="250">With tea<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<br><br>
<input type="text" id="order" size="50">
<input type="submit" value="Submit">
</form>

<script>
function myFunction() {
  var coffee = document.forms["myform"];
  var txt = "";
  var i;
  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt + coffee[i].value + ", ";

    }
  }
  document.getElementById("order").value = "You ordered a coffee with: " + txt;
}
</script>

</body>
</html>

Answer 1

使用數組，將值推送到for循環中，然后使用join()

var txt = [];
var i;
for (i = 0; i < coffee.length; i++) {
  if (coffee[i].checked) {
    txt.push(coffee[i].value);
  }
}
document.getElementById("order").value = "You ordered a coffee with: " + txt.join(', ');

作為旁注，使用querySelectorAll()您可以只選擇選中的 chekboxes，而不使用循環內的條件：

var coffee = [...document.querySelectorAll('[name="myform"] input:checked')];
var i, txt = [];

for (i = 0; i < coffee.length; i++) {
    txt.push(coffee[i].value);
}
document.getElementById("order").value = "You ordered a coffee with: " + txt.join(', ');

Answer 2

如果您確定txt的末尾總是有一個逗號，並且您想使用slice ，則可以運行txt = txt.slice(0,-2) 。 -2 是因為您有", " ，這是兩個字符。 但數組答案是更好的方法。

Answer 3

function myFunction() {
  var coffee = document.forms["myform"];
  var txt = "";
  var i;
  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt + coffee[i].value + ", ";

    }
  }
  document.getElementById("order").value = "You ordered a coffee with: " +txt.substring(0, txt.length - 1);

}

獲取javascript中輸入類型復選框中所有復選框的值

問題描述

3 個解決方案

解決方案1
1 2020-01-22 10:24:17

解決方案2
0 2020-01-22 10:25:07

解決方案3
0 2020-01-22 10:27:55

獲取javascript中輸入類型復選框中所有復選框的值

問題描述

3 個解決方案

解決方案1 1 2020-01-22 10:24:17

解決方案2 0 2020-01-22 10:25:07

解決方案3 0 2020-01-22 10:27:55

解決方案1
1 2020-01-22 10:24:17

解決方案2
0 2020-01-22 10:25:07

解決方案3
0 2020-01-22 10:27:55