I have a list of checkbox, my goal is to create and store the value of checkbox only the one that is checked. Can someone guide me with this?

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

I have a list of checkbox, my goal is to create and store the value of checkbox only the one that is checked. Can someone guide me with this?

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

• javascript
• checkbox

• 2 If you want only one out of the three, use radio buttons. – Gor Commented May 17, 2013 at 5:03
• 1 What if more than one is checked? – Qantas 94 Heavy Commented May 17, 2013 at 5:03
• Yes, if the user checked two of them, I only want to store the 2 value of the checkbox that is checked – user2310422 Commented May 17, 2013 at 5:04
• @user2310422 Please be clear on your question, you want to store it in PHP array, Js array or something else.. – Sudhir Bastakoti Commented May 17, 2013 at 5:10
• HTML 5 localStorage ? – DDK Commented May 17, 2013 at 5:14

5 Answers 5

You really should show some code of what you have tried. You can get the checkboxes by name, then loop over them and collect the values of those that are checked:

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

Please do one thing change name vehicle to vehicle[]

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

at post you will receive the array of checked vehicle values and you can store it to DB

in $_POST['vehicle']

Look on live demo

http://jsbin./uwewi

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

OR

jQuery - checkboxes like radiobuttons

If you want to get only one value among this than please you radio button its best way.

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

OR

If you want to go with checkbox than you below 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>

Hope this will help you...!!

If you use jQuery:

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

console.log(vehicles);

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