Question

我无法从我的复选框中获取每个复选框的值（单独选择）（除了最后一个正常工作）。

任何人都可以帮我解决这个问题并更正我的代码吗？

＆＃13;

function showChoices() {
  var values = [];
  var cbs = document.catalog.colors;
  for (var i = 0, cbLen = cbs.length; i < cbLen; i++) {
    if (cbs[i].checked) {
      values.push(cbs[i].value);
      document.getElementById('display').innerHTML = "You selected: " + values.join(', ') + ".";
    } else {
      document.getElementById('display').innerHTML = "Please select an option.";
    }
  }
}

＆＃13;

<form method="post" name="catalog">
  <input type="checkbox" name="colors" value="red" /><span>red</span> <br />
  <input type="checkbox" name="colors" value="orange" /><span>orange</span> <br />
  <input type="checkbox" name="colors" value="green" /><span>green</span> <br />
  <input type="checkbox" name="colors" value="blue" /><span>blue</span> <br />
  <input type="button" onclick="showChoices();" value="Submit">
</form>

<br />
<span id='display'></span>

＆＃13;

Answer 1

您正在使用＆＃34覆盖div＃display的innerHTML;请选择一个选项...＆＃34;每当循环的最后一次迭代跳转到else块时（意味着最后一个框未被检查），就会生成文本。

我会检查是否至少选择了一个元素，如果没有从函数中提前返回。之后，您可以通过将它们连接在一起来显示值。

＆＃13;

function showChoices() {
  var values = [];
  var cbs = Array.from(document.catalog.colors);
  let el = document.getElementById('display');
  let checked = cbs.filter(e => e.checked);
  if (!checked.length) {
    el.innerHTML = 'Please select at least one';
    return false;
  }
  
  el.innerHTML = `You selected ${checked.map(e => e.value).join(', ')}`;
  return false;  
}

＆＃13;

<form method="post" name="catalog">
  <input type="checkbox" name="colors" value="red" /><span>red</span> <br />
  <input type="checkbox" name="colors" value="orange" /><span>orange</span> <br />
  <input type="checkbox" name="colors" value="green" /><span>green</span> <br />
  <input type="checkbox" name="colors" value="blue" /><span>blue</span> <br />
  <input type="button" onclick="showChoices();" value="Submit">
</form>

<br />
<span id='display'></span>

＆＃13;

Answer 2

工作解决方案

你可以写这样的js并希望这会有所帮助：

＆＃13;

function showChoices() {
  var values = [];
  var cbs = document.catalog.colors;
  var cbLen = cbs.length;
  for (var i = 0; i < cbLen; i++) {
    if (cbs[i].checked) {
      values.push(cbs[i].value);
    }
  }
  if (values.length != 0) {
    document.getElementById('display').innerHTML = "You selected: " + values.join(', ') + ".";
  } else {
    document.getElementById('display').innerHTML = "Please select an option.";
  }
}

＆＃13;

<form method="post" name="catalog">
  <input type="checkbox" name="colors" value="red" /><span>red</span> <br />
  <input type="checkbox" name="colors" value="orange" /><span>orange</span> <br />
  <input type="checkbox" name="colors" value="green" /><span>green</span> <br />
  <input type="checkbox" name="colors" value="blue" /><span>blue</span> <br />
  <input type="button" onclick="showChoices();" value="Submit">
</form>

<br />
<span id='display'></span>

＆＃13;

从复选框获取值时出现Javascript错误

2 个答案: