javascript - 数组javascript中的复选框值

Question

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

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

Answer 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>

Answer 2

请做一件事将名称更改vehicle为vehicle[]

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

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

在$_POST['vehicle']

Answer 3

观看现场演示

http://jsbin.com/uwewi

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

或者

jQuery - 复选框，如单选按钮

如果您只想获得其中一个值，请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>

希望对你有帮助...！！

Answer 4

如果你使用 jQuery：

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

console.log(vehicles);

Answer 5

Updated Answer

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