how to get all checked checkbox value in javascript?

Today, We want to share with you how to get all checked checkbox value in javascript.In this post we will show you javascript get checkbox value, hear for jquery get checkbox value we will give you demo and example for implement.In this post, we will learn about jquery check if checkbox is checked with an example.

How to retrieve checked checkboxes values with JavaScript/jQuery

In this post, I will learn how to retrieve or get all the values of checked or selected checkboxes with Pure JavaScript as well as jQuery Client side Programming languages.

Get all checked Checkbox Values in AngularJS
Get all checked Checkbox Values in AngularJS

1. Using JavaScript Source Code

In pure JavaScript Example, you can use the checked/selected property to get all the Programming languages data checked state of a checkbox. The bellow complete source code demonstrates means DEMO for DOM elements this with getElementsByName() function.

index.html

<!doctype html>
<html>
  <body>
    <p>Choose your subject:</p>
    <div>
      <input type="checkbox" id="laravel8" name="subject" value="laravel8" checked>
      <label for="laravel8">Laravel 8</label>
    </div>
     <div>
      <input type="checkbox" id="vuejs" name="subject" value="vuejs" checked>
      <label for="vuejs">Vue Js</label>
    </div>
    <div>
      <input type="checkbox" id="angular" name="subject" value="angular">
      <label for="angular">AngularJS</label>
    </div>
    <div>
      <input type="checkbox" id="reactjs" name="subject" value="reactjs">
      <label for="reactjs">ReactJs</label>
    </div>
    <div>
      <button id="select">Get Checked Checkboxes</button>
    </div>
    <br>
    <script>
		document.getElementById('select').onclick = function() {
		  var planguages = document.getElementsByName('subject');
		  for (var ckboxdata of planguages) {
		    if (ckboxdata.checked)
		      document.body.append(ckboxdata.value + ' ');
		  }
		}
    </script>
  </body>
</html>

Onther Way, you can use the simply use a js querySelectorAll() function with :checked selector attributes.

Read Also:  php get current url with query string - How to Get Current URL in PHP?

index.html

<!doctype html>
<html>
  <body>
    <p>Choose your subject:</p>
    <div>
      <input type="checkbox" id="laravel8" name="subject" value="laravel8" checked>
      <label for="laravel8">Laravel 8</label>
    </div>
     <div>
      <input type="checkbox" id="vuejs" name="subject" value="vuejs" checked>
      <label for="vuejs">Vue Js</label>
    </div>
    <div>
      <input type="checkbox" id="angular" name="subject" value="angular">
      <label for="angular">AngularJS</label>
    </div>
    <div>
      <input type="checkbox" id="reactjs" name="subject" value="reactjs">
      <label for="reactjs">ReactJs</label>
    </div>
    <div>
      <button id="select">Get Checked Checkboxes</button>
    </div>
    <br>
        <script>
        document.getElementById('select').onclick = function() {
		  var planguages = document.querySelectorAll('input[type="checkbox"]:checked');
		  for (var ckboxdata of planguages) {
		    document.body.append(ckboxdata.value + ' ');
		  }
		}
        </script>
  </body>
</html>

Above source code will return all the selected checkboxes in the DOM elemets. To select single programming languages group of check boxes with a each name, you can do like below index.html file:

index.html

<!doctype html>
<html>
  <body>
    <p>Choose your subject:</p>
    <div>
      <input type="checkbox" id="laravel8" name="subject" value="laravel8" checked>
      <label for="laravel8">Laravel 8</label>
    </div>
     <div>
      <input type="checkbox" id="vuejs" name="subject" value="vuejs" checked>
      <label for="vuejs">Vue Js</label>
    </div>
    <div>
      <input type="checkbox" id="angular" name="subject" value="angular">
      <label for="angular">AngularJS</label>
    </div>
    <div>
      <input type="checkbox" id="reactjs" name="subject" value="reactjs">
      <label for="reactjs">ReactJs</label>
    </div>
    <div>
      <button id="select">Get Checked Checkboxes</button>
    </div>
    <br>

    <script>
    document.getElementById('select').onclick = function() {
	  var planguages = document.querySelectorAll('input[name="subject"]:checked');
	  for (var ckbox of planguages) {
	    document.body.append(ckbox.value + ' ');
	  }
	}
    </script>
  </body>
</html>

2. Using jQuery Source Code

With jQuery Example, you can use an attribute selector like as index.html file:

Read Also:  how to get client mac address in javascript?

index.html

<!doctype html>
<html>
  <body>
    <p>Choose your subject:</p>
    <div>
      <input type="checkbox" id="laravel8" name="subject" value="laravel8" checked>
      <label for="laravel8">Laravel 8</label>
    </div>
     <div>
      <input type="checkbox" id="vuejs" name="subject" value="vuejs" checked>
      <label for="vuejs">Vue Js</label>
    </div>
    <div>
      <input type="checkbox" id="angular" name="subject" value="angular">
      <label for="angular">AngularJS</label>
    </div>
    <div>
      <input type="checkbox" id="reactjs" name="subject" value="reactjs">
      <label for="reactjs">ReactJs</label>
    </div>
    <div>
      <button id="planguages">Get Checked Checkboxes</button>
    </div>
    <br>
    <script>
	$(document).ready(function() {
	  $('#planguages').click(function() {
	    $('input[type="checkbox"]:checked').each(function() {      // $(':checkbox:checked')
	      document.body.append(this.value + ' ');                  // $(this).val()
	    });
	  });
	});
    </script>
  </body>
</html>

To join the all the Programming subject values of checked checkboxes as a single Data string separated with a delimiter, you can do like:

index.html

<!doctype html>
<html>
  <body>
    <p>Choose your subject:</p>
    <div>
      <input type="checkbox" id="laravel8" name="subject" value="laravel8" checked>
      <label for="laravel8">Laravel 8</label>
    </div>
     <div>
      <input type="checkbox" id="vuejs" name="subject" value="vuejs" checked>
      <label for="vuejs">Vue Js</label>
    </div>
    <div>
      <input type="checkbox" id="angular" name="subject" value="angular">
      <label for="angular">AngularJS</label>
    </div>
    <div>
      <input type="checkbox" id="reactjs" name="subject" value="reactjs">
      <label for="reactjs">ReactJs</label>
    </div>
    <div>
      <button id="planguages">Get Checked Checkboxes</button>
    </div>
    <br>
    <script>
	$(document).ready(function() {
	  $('#planguages').click(function() {
	    var liveDataValue = $('input[type="checkbox"]:checked').map(function() {
	      return $(this).val();
	    }).get().join(',');

	    document.body.append(liveDataValue);
	  })
	});
    </script>
  </body>
</html>

I hope you get an idea about how to get all checked checkbox 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.