How to Get Multiple Checkbox Value in Javascript with Getelementbyid

How to Get Multiple Checkbox Value in Javascript with Getelementbyid

In this post You can easily learn How to Get Multiple Checkbox Value in Javascript with Getelementbyid.

How to Get Multiple Checkbox Value in Javascript with Getelementbyid
How to Get Multiple Checkbox Value in Javascript with Getelementbyid

Today, we’ll show you how to use getelementbyid in javascript to get multiple checkbox values. In this post, we’ll show you how to display checked checkbox values in javascript, as well as how to retrieve multiple checkbox values in javascript using getelementsbyname. We’ll show you how to do it with a demo and 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>  

Getting multiple selected checkbox values in a string in javascript and PHP – Stack Overflow

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x