How To Get Selected Checkbox Value In Array Using jQuery

In this article, we will see how to get the selected checkbox values in an array using jquery. Here I will give you an example to store a selected checkbox value in an array using javascript. When you want to get multiple selected checkbox values in array using jquery at that time you can use each function in javascript.

So, let's how to get checked checkbox values in jquery, get all selected checkbox values in jquery, and how to store selected checkbox values in an array in javascript.

Example 1:

<html>
<head>
	<title>How To Get Selected Checkbox Value In Array Using jQuery - Techsolutionstuff </title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<body id="body">
	<h1>How To Get Selected Checkbox Value In Array Using jQuery - Techsolutionstuff </h1>
	<p id="msg"></p>
	
	<input type="checkbox" name="type" value="Green" /> Green:
	<input type="checkbox" name="type" value="Yello" /> Yello:
	<input type="checkbox" name="type" value="Blue" /> Blue:
	<input type="checkbox" name="type" value="Pink" />Pink:
	<br>
	<button>Submit</button>
	<p id="getvalue">
	</p>
	<script>
		$('#msg').text('please check checkbox then submit button.');
		$('button').on('click', function() {
			var array = [];
			$("input:checked").each(function() {
				array.push($(this).val());
			});
			$('#getvalue').text(array);
		});
	</script>
</body>

</html>

 

 

Example 2:

<html>
<head>
	<title>How To Get Selected Checkbox Value In Array Using jQuery - Techsolutionstuff </title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
  <table id="color">
    <tr>
        <td><input id="post1" type="checkbox" value="1"/><label for="Green"></label>Green</td>
    </tr>

    <tr>
       <td><input id="post2" type="checkbox" value="2"/><label for="Yellow">Yellow</label></td>
    </tr>

    <tr>
      <td><input id="post3" type="checkbox" value="3"/><label for="Blue">Blue</label></td>
    </tr>

    <tr>
      <td><input id="post4" type="checkbox" value="4"/><label for="Pink">Pink</label></td>
   </tr>
  </table><br />

  <input type="button" id="btnClick" value="Get" />

</body>

<script type="text/javascript">
    $(function () {
        $("#btnClick").click(function () {
            var selected = new Array();
            $("#color input[type=checkbox]:checked").each(function () {
               selected.push(this.value);
            });
             if (selected.length > 0) {
                alert("Selected values: " + selected.join(","));
            }
        });
    });
</script>
</html>

 


You might also like :

RECOMMENDED POSTS

FEATURE POSTS