How to Get Selected Checkbox Value in Array Using jQuery

Websolutionstuff | May-24-2021 | Categories : PHP jQuery

In this post we will see how to get selected checkbox value in array using jquery. Here i will give you some example to store selected checkbox value in 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. Solet's see how to store selected checkbox value in array in javascript.

Example 1 : 

<html>
<head>
	<title>How to Get Selected Checkbox Value in Array Using jQuery - websolutionstuff.com
	</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 - websolutionstuff.com </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 - websolutionstuff.com</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>

 

Recommended Post
Featured Post
How To Use Google Recaptcha V2 In Laravel 9
How To Use Google Recaptcha V2...

In this article, we will see how to use google ReCaptcha v2 in laravel 9. Google ReCaptcha is used for advance...

Read More

Jun-14-2022

Laravel 9 whereBetween Query Example
Laravel 9 whereBetween Query E...

In this article, we will see laravel 9 whereBetween query example. The whereBetween() method is used to check value...

Read More

Oct-14-2022

Laravel 8 Datatables Keeping Selected Page Number
Laravel 8 Datatables Keeping S...

In this tutorial we will see laravel 8 datatables keeping selected page number after callback. In datatable page nu...

Read More

Dec-03-2021

How To Validate Password And Confirm Password In React JS
How To Validate Password And C...

In this article, we will see how to validate password and confirm password in react js. Sometimes we need to add th...

Read More

Sep-14-2022