Question

我有一个复选框列表，我的目标是创建并存储复选框的值，只选中要检查的复选框。有人能引导我吗？

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

Answer 1

请做一件事将名称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 2

你真的应该展示一些你尝试过的代码。您可以按名称获取复选框，然后循环显示它们并收集已检查的值：

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

希望这会帮助你...... !!

Answer 4

如果你使用jQuery：

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

console.log(vehicles);

Answer 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

数组javascript中的复选框值

5 个答案: