How to get multiple checkbox value in javascript and JQuery

In many websites you find multiple check box form to select your interest, or to select multiple options.

That can be created by using HTML check box.

Here to make a input as a text box we need type="checkbox".

name is name given to text box

value property specifies what value a text box holds.

id is used to uniquely identify this text box in HTML Document.

To get this text box value we can use JavaScript.

To get element by Id we can use document.getElementById().

Inside getElementById() we pass the elements id.

in above code we can see that check box id is checkbox1

and to get value we can use value property of getElementById()

how to get checkbox value in javascript with getelementbyid()

var bike = document.getElementById("checkbox1");         
     if(bike.checked){
         ele.push(bike.value);
   }

How to get multiple checkbox value in javascript with getElementById()

Here to select multiple check boxes we selected each check box one by one.

Select Element by id using document.getElementById().

then check checkbox is checked or not.

If checked then push in array.

How to get checkbox value in JQuery

JQuery makes code simple and easy, to select checkbox we can use either name, id or input type checkbox.

We can use any of above ways as per need.

Here we will use checkbox id to select checkbox.

You can download JQuery or include from CDN

We checked check box is selected or not using ($('#checkbox1').is(":checked"))

Here checkbox1 is id of checkbox.

To get the value of check box $('#checkbox1').val();

How to get multiple checkbox value in JQuery

$("input:checkbox[name=cb1]:checked").each(function(){                  
ele.push($(this).val());
});

Here Input check box with name cb1 is checked then for each element get checkbox value and push to array.

get multiple checkbox value using JQuery
Fig: get multiple checkbox value using JQuery

It is very easy to access multiple check box value using JavaScript and JQuery.

You can use these in your web page like in form and to capture user information.

Read More

  1. Add active class onclick
  2. JavaScript Multiplication Table
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript