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
Bootstrap Daterangepicker Example
Bootstrap Daterangepicker Exam...

In this small tutorial i will show you how to implement bootstrap daterangepicker example, bootstrap date rang...

Read More

May-17-2021

How to Get Current URL in Laravel
How to Get Current URL in Lara...

In this article, we will see how to get the current URL in laravel. If you want to get the current page URL in...

Read More

Mar-10-2021

How To File Upload In React JS
How To File Upload In React JS

In this article, we will see how file uploads in react js. File uploading means a user from a client machine wants...

Read More

Sep-05-2022

Laravel 9 Socialite Login with Facebook Account
Laravel 9 Socialite Login with...

In this article, we will see laravel 9 socialite login with a facebook account. Many websites provide different typ...

Read More

Apr-16-2022