Checkbox value in array javascript

Question

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

Yes, if the user checked two of them, I only want to store the 2 value of the checkbox that is checked — user2310422, May 17 '13 at 05:04
@user2310422 Please be clear on your question, you want to store it in PHP array, Js array or something else.. — Sudhir Bastakoti, May 17 '13 at 05:10
If u have a list of values falling under a category of which you want one option to be selected. I suggest you use the listbox itself. — Arun, May 17 '13 at 05:19
I think, Actually he want to do same functionality with radio button type single checked. If any checkbox checked than other checkebox remove checked. — Kishan Patel, May 17 '13 at 06:44

score 3 · Answer 1 · answered May 17 '13 at 05:19

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>

@GiorgosFandomas–not in any browser I've tested, nor those in general use that have supported scripting for about the last 20 years. ;-) — RobG, Jan 28 '15 at 02:53

score 1 · Answer 2 · edited May 17 '13 at 05:08

1

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

edited May 17 '13 at 05:08

Colin Brock

21,267
9
46
61

answered May 17 '13 at 05:04

Praveen kalal

2,148
4
19
33

4

there's no mention of Server Side language.. not good to answer on assumptions...! – Sudhir Bastakoti May 17 '13 at 05:06
but its under category of php – Praveen kalal May 17 '13 at 05:08
@Ian hey mate earlier it was in under php tag – Praveen kalal May 17 '13 at 05:12
Using fieldnames with '[]' at the end causes trouble when you want to process the fields in javascript like in RobG's answer. – user2587656 Jul 08 '20 at 12:23

score 0 · Answer 3 · edited May 23 '17 at 10:32

Look on live demo

http://jsbin.com/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...!!

score -2 · Answer 4 · answered May 17 '13 at 05:16

-2

If you use jQuery:

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

console.log(vehicles);

answered May 17 '13 at 05:16

ijse

2,998
1
19
25

1

Or even simpler: `var vehicles = $("input:checked").map(function () { return this.value; }).get();` – Ian May 17 '13 at 05:18
2

Yeah, I see that jQuery tag… – RobG May 17 '13 at 05:19
@RobG Doesn't jQuery come standard with browsers nowadays? ;-) – Ian May 17 '13 at 05:20

Jay Harris · Answer 5 · 2013-12-16T08:10:28.397

-2

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

edited Dec 16 '13 at 08:10

answered May 17 '13 at 05:25

Jay Harris

4,201
17
21

Checkbox value in array javascript

5 Answers5