javascript数组中的复选框值

Checkbox value in array javascript

本文关键字：复选框 数组 javascript      更新时间：2023-09-26

我有一个复选框列表，我的目标是创建和存储复选框的值，只有一个被选中。有人能指点我一下吗?

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

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

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

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

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

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

in $_POST['vehicle']

观看现场演示

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>

希望这将帮助你…!!

如果使用jQuery:

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

更新答案 

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);
工作小提琴

相关文章：