数组javascript中的复选框值答案

【问题标题】：Checkbox value in array javascript数组javascript中的复选框值
【发布时间】：2013-05-12 04:34:47
【问题描述】：

我有一个复选框列表，我的目标是仅创建和存储复选框的值，即选中的复选框。有人可以指导我吗？

<input type="checkbox" name="vehicle" value="Bike"/>
<input type="checkbox" name="vehicle" value="Car"/>
<input type="checkbox" name="vehicle" value="Airplane"/>

【问题讨论】：

如果您只想要三个中的一个，请使用单选按钮。
如果勾选了多个怎么办？
是的，如果用户选中其中两个，我只想存储选中的复选框的 2 值
@user2310422 请明确您的问题，您想将其存储在 PHP 数组、Js 数组或其他东西中......
HTML 5 本地存储 ?

标签： javascript checkbox

【解决方案1】：

您确实应该显示一些您尝试过的代码。您可以按名称获取复选框，然后遍历它们并收集被选中的复选框的值：

<script>

function getCheckboxValues(form) {
  var values = [];
  var vehicles = form.vehicle;

  for (var i=0, iLen=vehicles.length; i<iLen; i++) {
    if (vehicles[i].checked) {
      values.push(vehicles[i].value);
    }
  }
  // Do something with values
  alert("Vehicles: " + values.join(', '));
  return values;
}

</script>

<form onsubmit="getCheckboxValues(this); return false;">
  Bike: <input type="checkbox" name="vehicle" value="Bike"><br>
  Car: <input type="checkbox" name="vehicle" value="Car"><br>
  Aeroplane: <input type="checkbox" name="vehicle" value="Airplane"><br>
  <input type="reset"> <input type="submit">
</form>

【讨论】：

form.vechicle 为空
@GiorgosFandomas——不在我测试过的任何浏览器中，也不是在过去 20 年左右支持脚本的一般使用的浏览器中。 ;-)

【解决方案2】：

请做一件事，把名字vehicle改成vehicle[]

<input type="checkbox" name="vehicle[]" value="Bike"/>
<input type="checkbox" name="vehicle[]" value="Car"/>
<input type="checkbox" name="vehicle[]" value="Airplane"/>

在发布时，您将收到已检查车辆值的数组，您可以将其存储到数据库中

在$_POST['vehicle']

【讨论】：

没有提到服务器端语言..不好回答假设...！
但它属于 php 类别
@Ian hey mate 之前它在 php 标签下
当您想像 RobG 的回答一样处理 javascript 中的字段时，最后使用带有 '[]' 的字段名会导致麻烦。

【解决方案3】：

观看现场演示

http://jsbin.com/uwewi

<script>
$('input[name=vahicle]').click(function() {
    $('input[name=vahicle]:checked').not(this).removeAttr('checked');
});
</script>

或

jQuery - checkboxes like radiobuttons

如果您只想获得其中一个值，那么请按radio 按钮，这是最好的方式。

<input type="radio" name="vehicle" value="Bike"/>
<input type="radio" name="vehicle" value="Car"/>
<input type="radio" name="vehicle" value="Airplane"/>

或

如果你想使用checkbox而不是你下面的jQuery；

<input type="checkbox" name="vehicle" value="Bike"/>
<input type="checkbox" name="vehicle" value="Car"/>
<input type="checkbox" name="vehicle" value="Airplane"/>
<script>
$('input[name=vahicle]').click(function(){
    $('input[name=vahicle]').removeAttr('checked');
    $(this).attr('checked', true);

});
</script>

希望这会对你有所帮助...！！

【讨论】：

【解决方案4】：

如果你使用 jQuery：

var vehicles = [];
$("input:checked").each(function() {
  vehicles.push($(this).val());
});

console.log(vehicles);

【讨论】：

或者更简单：var vehicles = $("input:checked").map(function () { return this.value; }).get();
是的，我看到了那个 jQuery 标签……
@RobG jQuery 现在不是浏览器的标准配置吗？ ;-)

【解决方案5】：

更新答案

var input = document.getElementsByTagName('input')
,   value = {0:'', 1:'', 2:''}
,   x = input.length--
,   array
,   box
;
function handle (x) {

 input[x].onchange = function () {
   box      = input[x];
   value[x] = box.checked ? box.value : '';
   array    = [value[0], value[1], value[2]];

   console.log(array);       
 };
}

while (x) handle(--x);

Working fiddle

【讨论】：