how to get multiple checkbox value in javascript with getelementbyid?

Today, We want to share with you how to get multiple checkbox value in javascript with getelementbyid.In this post we will show you how to display checked checkbox value in javascript, hear for how to get multiple checkbox value in javascript with getelementsbyname we will give you demo and example for implement.In this post, we will learn about jquery get checkboxes value if checked/selected with an example.

how to get multiple checkbox values in javascript?

Example 1: Create and get checkbox value

<html>  
<body>  
  
<h2 style="color:blue">Create a checkbox and get its value</h2>  
<h3> Are you a Hindi Teacher? </h3>  
Yes: <input type="checkbox" id="liveProduct1" value="Yes, I'm a Hindi Teacher">  
No: <input type="checkbox" id="liveProduct2" value="No, I'm not a Hindi Teacher">  
<br> <br>  
<button onclick="checkCheckbox()">Submit</button> <br>  
  
<h4 style="color:blue" id="result"></h3>   
<h4 style="color:red" id="error"></h3>   
  
<script>  
function checkCheckbox() {  
  var yes = document.getElementById("liveProduct1");  
  var no = document.getElementById("liveProduct2");  
  if (yes.checked == true && no.checked == true){  
    return document.getElementById("error").innerHTML = "Please mark only one checkbox either Yes or No";  
  }  
  else if (yes.checked == true){  
    var y = document.getElementById("liveProduct1").value;  
    return document.getElementById("result").innerHTML = y;   
  }   
  else if (no.checked == true){  
    var n = document.getElementById("liveProduct2").value;  
    return document.getElementById("result").innerHTML = n;  
  }  
  else {  
    return document.getElementById("error").innerHTML = "*Please mark any of checkbox";  
  }  
}  
</script>  
  
</body>  
</html>  

Get all checkbox value

Example 2: index.html

<html>  
<body>  
  
<h2 style="color:blue">Create a checkbox and get its value</h2>  
<h4> Select the Online Elec Products, you know </h4>  
<tr>  
<td> Mobile: <input type="checkbox" id="product1" class="weblist" value="Mobile"> </td>  
<td> Laptop: <input type="checkbox" id="product2" class="weblist" value="Laptop"> </td>   
</tr> <tr>  
<td> Computer: <input type="checkbox" id="product3" class="weblist" value="Computer"> </td>  
<td> Hadephone: <input type="checkbox" id="product4" class="weblist" value="Hadephone"> </td>  
</tr> <tr>  
<td> Lcd: <input type="checkbox" id="product5" class="weblist" value="Lcd"> </td>  
<td> DVD: <input type="checkbox" id="product6" class="weblist" value="DVD"> </td>  
<button onclick="checkAll()">Check all</button> <br><br>  
<button onclick="getCheckboxValue()">Submit</button> <br>  
<h4 style="color:blue" id="result"></h4>    
  
<script>  
function checkAll() {  
        var inputs = document.querySelectorAll('.pl');   
        for (var i = 0; i < inputs.length; i++) {   
            inputs[i].checked = true;   
        }   
}  
function getCheckboxValue() {  
  
  var productfirst = document.getElementById("product1");  
  var productsecond = document.getElementById("product2");  
  var productthird = document.getElementById("product3");  
  var productfourth = document.getElementById("product4");  
  var productfifth = document.getElementById("product5");  
  var productsix = document.getElementById("product6");  
     
  var res=" ";   
  if (productfirst.checked == true){  
    var pproductfirst = document.getElementById("product1").value;  
    res = pproductfirst + ",";   
  }   
  else if (productsecond.checked == true){  
    var pproductsecond = document.getElementById("product2").value;  
    resres = res + pproductsecond + ",";   
  }  
  else if (productthird.checked == true){  
  document.write(res);  
    var pproductthird = document.getElementById("product3").value;  
    resres = res + pproductthird + ",";   
  }  
  else if (productfourth.checked == true){  
    var pproductfourth = document.getElementById("product4").value;  
    resres = res + pproductfourth + ",";   
  }  
  else if (productfifth.checked == true){  
    var pproductfifth = document.getElementById("product5").value;  
    resres = res + pproductfifth + ",";   
  }  
  else if (productsix.checked == true){  
    var pproductsix = document.getElementById("product6").value;  
    resres = res + pproductsix;   
  } else {  
  return document.getElementById("result").innerHTML = "You have not selected anything";  
  }  
  return document.getElementById("result").innerHTML = "You have selected " + res + " Products";  
}  
</script>  
  
</body>  
</html>  

Get all marked checkboxes value using querySelectorAll() method

Example 3: index.html

<html>  
<body>  
  
<h2 style="color:blue"> Get all marked checkboxes value </h2>  
<h4> Select the Online Elec Products, you know </h4>  
<tr>  
<td> Mobile: <input type="checkbox" id="product1" name="weblist" value="Mobile"> </td>  
<td> Laptop: <input type="checkbox" id="product2" name="weblist" value="Laptop"> </td>   
</tr> <tr>  
<td> Computer: <input type="checkbox" id="product3" name="weblist" value="Computer"> </td>  
<td> Hadephone: <input type="checkbox" id="product4" name="weblist" value="Hadephone"> </td>  
</tr> <tr>  
<td> Lcd: <input type="checkbox" id="product5" name="weblist" value="Lcd"> </td>  
<td> DVD: <input type="checkbox" id="product6" name="weblist" value="DVD"> </td> <br> <br>  
<button id="btn">Submit</button> <br>  
<h4 style="color:blue" id="result"></h4>    
  
<script>  
document.getElementById('btn').onclick = function() {  
  var markedCheckbox = document.getElementsByName('pl');  
  for (var checkbox of markedCheckbox) {  
    if (checkbox.checked)  
      document.body.append(checkbox.value + ' ');  
  }  
}  
</script>  
  
</body>  
</html>  

I hope you get an idea about how to pass checkbox checked value in javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.