Question

我试图在提供的输入字段上获取所有复选框选中的值。我使用javascript来获取值，但它只显示一个选中的值。当我选中另一个复选框时，它仅显示第二个复选框。这是我到目前为止所做的：

<html>
<head>
<script type="text/javascript">
function checkbox(val){
document.getElementById("show").value = val;
}
</script>
</head>
<body>
    <form>
        <input type="checkbox" id="bk" name="vehicle" onClick="checkbox(this.value);" value="Bike">I have a bike<br></br>
        <input type="checkbox" id="cr" name="vehicle" onClick="checkbox(this.value);" value="Car">I have a car<br></br> 
        <input type="text" id="show" name="vehicle"><br>
        <input type="submit" value="Showe">
    </form> 
</body>
</html>

正如我所说，这个只显示一个选中的值，但我想在指定的输入字段上显示所有选中的值！谢谢！

Answer 1

您的代码仅将当前点击的项目发送到该方法。您需要查看该方法中的所有复选框，找到已选中的复选框，将它们放入数组中，然后将数组值插入到输入中。另外值得注意的是，当你这样做并在每次点击时构建数组时，它也会使你看起来好像在取消选中它们时从输入中删除项目。

function checkbox(){
  
  var checkboxes = document.getElementsByName('vehicle');
  var checkboxesChecked = [];
  // loop over them all
  for (var i=0; i<checkboxes.length; i++) {
     // And stick the checked ones onto an array...
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i].value);
     }
  }
  document.getElementById("show").value = checkboxesChecked;

}

    <form>
        <input type="checkbox" id="bk" name="vehicle" onClick="checkbox();" value="Bike">I have a bike<br></br>
        <input type="checkbox" id="cr" name="vehicle" onClick="checkbox();" value="Car">I have a car<br></br> 
        <input type="text" id="show" name="vehicle"><br>
        <input type="submit" value="Showe">
    </form>

在textarea javascript上显示已选中的复选框值

1 个答案: