How to get multiple checkbox value in javascript and JQuery

On many websites, you find multiple check box forms to select your interest, or to select multiple options.

That can be created by using the HTML check box.

<input type="checkbox" name="Hobby" value="Painting" id="cb1">

1	<input type="checkbox" name="Hobby" value="Painting" id="cb1">

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

name is a name given to a text box

value property that specifies what value a text box holds.

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

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

1	Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

To get this text box value we can use JavaScript.

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

Inside getElementById() we pass the id of the element.

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

and to get the value we can use the 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); }

<!DOCTYPE html>
<html>
    <body>
        Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">
        <button onclick="getValue()">Get Value</button>
        <script>
            function getValue() {
              var x = document.getElementById("checkbox1").value;
              alert("value is "+x);
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<body>

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

<button onclick="getValue()">Get Value</button>

function getValue() {

var x = document.getElementById("checkbox1").value;

alert("value is "+x);

}

</script>

</body>

</html>

Try It

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

Here to select multiple checkboxes 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 the array.

<!DOCTYPE html>
<html>
    <body>
        <label>Check Which you have</label><br/>
        <input type="checkbox" id="checkbox1" name="bike" value="Bike"> Bike <br/>
        <input type="checkbox" id="checkbox2" name="car" value="Car"> Car   <br/>
        <input type="checkbox" id="checkbox3" name="home" value="Home"> Home <br/>
        <button onclick="getValue()">Get Value</button>
        <p id="p1"></p>
        <script>
            function getValue() {
             var ele=[]
              var bike = document.getElementById("checkbox1")
              if(bike.checked){
                    ele.push(bike.value);
             }
             var car = document.getElementById("checkbox2")
              if(car.checked){
                    ele.push(car.value);
             }
             var home = document.getElementById("checkbox3")
              if(home.checked){
                    ele.push(home.value);
             }
               if(ele.length>0){
                document.getElementById("p1").innerHTML = ele;
               }
               else{
               document.getElementById("p1").innerHTML = "You Dont have any thing";
               }
             }
             
             
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<body>

<label>Check Which you have</label><br/>

<button onclick="getValue()">Get Value</button>

function getValue() {

var ele=[]

var bike = document.getElementById("checkbox1")

if(bike.checked){

ele.push(bike.value);

}

var car = document.getElementById("checkbox2")

if(car.checked){

ele.push(car.value);

}

var home = document.getElementById("checkbox3")

if(home.checked){

ele.push(home.value);

}

if(ele.length>0){

document.getElementById("p1").innerHTML = ele;

}

else{

document.getElementById("p1").innerHTML = "You Dont have any thing";

}

</script>

</body>

</html>

Try It

How to get checkbox value in JQuery

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

We can use any of the above ways as per need.

Here we will use checkbox id to select the checkbox.

You can download JQuery or include it from CDN

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

Here checkbox1 is the id of the checkbox.

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

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#btn").click(function(){
                if ($('#checkbox1').is(":checked"))
                 {
                      var cbVal= $('#checkbox1').val();
                      alert(cbVal);
                 }
                 else{
                      alert("checkbox is not checked");
                 }
                 });
            });
        </script>
    </head>
    <body>
        Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Good">
        <button id="btn">Get Value</button>
        
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#btn").click(function(){

if ($('#checkbox1').is(":checked"))

{

var cbVal= $('#checkbox1').val();

alert(cbVal);

}

else{

alert("checkbox is not checked");

}

});

</script>

</head>

<body>

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Good">

<button id="btn">Get Value</button>

</body>

</html>

Try It

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.

Fig: get multiple checkbox value using JQuery

Example: how to get multiple checkbox” value in jquery using array

 <!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#btn").click(function(){
                   var ele=[];
             $("input:checkbox[name=cb1]:checked").each(function(){
                  ele.push($(this).val());
                  console.log("btn clicked");
               });
             alert("selected "+ele);
             });
            });
        </script>
    </head>
    <body>
        Your Play Games: <br/>
        Cricket <input type="checkbox"  name="cb1" value="Cricket"><br/>
        FootBall <input type="checkbox"  name="cb1" value="FootBall"><br/>
        VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>
        BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>
        <button id="btn">Get Value</button>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#btn").click(function(){

var ele=[];

$("input:checkbox[name=cb1]:checked").each(function(){

ele.push($(this).val());

console.log("btn clicked");

});

alert("selected "+ele);

});

</script>

</head>

<body>

Your Play Games: <br/>

Cricket <input type="checkbox" name="cb1" value="Cricket"><br/>

FootBall <input type="checkbox" name="cb1" value="FootBall"><br/>

VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>

BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>

<button id="btn">Get Value</button>

</body>

</html>

Try It

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.

How to store selected checkbox value in array in javascript

<!DOCTYPE html>
<html>
    <head>
        <style>
            #result{
            margin:50px;
            padding: 30px;
            border:1px solod red;
            background-color: cyan;
        </style>
        <script>
            function getValues() {
             var ele=[];
             var cb = document.getElementsByName("cb1");
                 var total = 0;
                    for (var i = 0; i < cb.length; i++)
                     {
                       if (cb[i].checked)
                       {
                          ele.push(cb[i].value);
                       }
                    } 
              if(ele.length>0){
                document.getElementById("result").innerHTML = "You selected " +ele;
               }
               else{
               document.getElementById("result").innerHTML = "You have not selected anything";
               }
             }
        </script>
    </head>
    <body>
        Your Play Games: <br/>
        Cricket <input type="checkbox"  name="cb1" value="Cricket"><br/>
        FootBall <input type="checkbox"  name="cb1" value="FootBall"><br/>
        VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>
        BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>
        <button id="btn" onclick=getValues()>Get Value</button>
        <div id="result"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#result{

margin:50px;

padding: 30px;

border:1px solod red;

background-color: cyan;

</style>

function getValues() {

var ele=[];

var cb = document.getElementsByName("cb1");

var total = 0;

for (var i = 0; i < cb.length; i++)

{

if (cb[i].checked)

{

ele.push(cb[i].value);

}

if(ele.length>0){

document.getElementById("result").innerHTML = "You selected " +ele;

}

else{

document.getElementById("result").innerHTML = "You have not selected anything";

}

</script>

</head>

<body>

Your Play Games: <br/>

Cricket <input type="checkbox" name="cb1" value="Cricket"><br/>

FootBall <input type="checkbox" name="cb1" value="FootBall"><br/>

VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>

BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>

<button id="btn" onclick=getValues()>Get Value</button>

</body>

</html>

This SO answer may be helpful for this.

Try It

Check multiple checkboxes using jquery

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#checkAll").change(function () {
                  $("input:checkbox").prop('checked', $(this).prop("checked"));
            });
            });
        </script>
    </head>
    <body>
        Select All <input type="checkbox" id="checkAll" name="checkAll" value="selectAll"/>
        <br/><br/><br/>
        Your Play Games: <br/>
        Cricket <input type="checkbox"  name="cb1" value="Cricket"><br/>
        FootBall <input type="checkbox"  name="cb1" value="FootBall"><br/>
        VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>
        BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>    
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#checkAll").change(function () {

$("input:checkbox").prop('checked', $(this).prop("checked"));

});

</script>

</head>

<body>

Select All <input type="checkbox" id="checkAll" name="checkAll" value="selectAll"/>

Your Play Games: <br/>

Cricket <input type="checkbox" name="cb1" value="Cricket"><br/>

FootBall <input type="checkbox" name="cb1" value="FootBall"><br/>

VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>

BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>

</body>

</html>

This SO answer will be more helpful

<!DOCTYPE html>
<html>
    <head>
        <script>
            function checkToggle() {
               var cb = document.getElementsByName("cb1");
             var checkAll = document.getElementById("checkAll");
                     if (checkAll.checked==true){
                       
                      for (var i = 0; i < cb.length; i++)               {
                      cb[i].checked=true;
                    } 
                     }
                     else{
                     
                      for (var i = 0; i < cb.length; i++)                     {
                      cb[i].checked=false;
                   } 
                     }
             }
        </script>
    </head>
    <body>
        Select All <input type="checkbox" name="checkAll" id="checkAll" onclick="checkToggle()" />
        <br/><br/>
        Your Play Games: <br/>
        Cricket <input type="checkbox"  name="cb1" value="Cricket"><br/>
        FootBall <input type="checkbox"  name="cb1" value="FootBall"><br/>
        VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>
        BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function checkToggle() {

var cb = document.getElementsByName("cb1");

var checkAll = document.getElementById("checkAll");

if (checkAll.checked==true){

for (var i = 0; i < cb.length; i++) {

cb[i].checked=true;

}

else{

for (var i = 0; i < cb.length; i++) {

cb[i].checked=false;

}

</script>

</head>

<body>

Select All <input type="checkbox" name="checkAll" id="checkAll" onclick="checkToggle()" />

Your Play Games: <br/>

Cricket <input type="checkbox" name="cb1" value="Cricket"><br/>

FootBall <input type="checkbox" name="cb1" value="FootBall"><br/>

VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>

BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>

</body>

</html>

Try It

how to get checkbox value in javascript with getelementbyid()

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

How to get checkbox value in JQuery

How to get multiple checkbox value in JQuery

Example: how to get multiple checkbox” value in jquery using array

How to store selected checkbox value in array in javascript

Check multiple checkboxes using jquery

Read More