[an error occurred while processing this directive]

jQuery to Select Multiple CheckBox


In this first jQuery tutorial we will develop a simple program that retrieves the value of selected checkbox from server and displays on the user browser. In this example we will be calling a server side PHP script . You can easily replace PHP with JSP, or ASP program.

Steps to develop the Select Multiple CheckBox  program

Step 1:





Create php file to that prints the CheckBox data . Here is the code of PHP script (postData.php).

echo "You have selected: ";
foreach ($_POST['checkbox_name'] as $checkbox_name)

$checkbox_name= htmlspecialchars($checkbox_name, ENT_QUOTES);
echo $checkbox_name, ' ', "\n";
echo "Please select the checkbox."; 

Step 2:

Write HTML page to call the postData.php . Create a new file (checkBoxSelect.php) and add the following code into it:

<title>JQuery Tutorial: C<title>
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
	var query_string = '';
			query_string += "&checkbox_name[]=" + this.value;
			type: "POST",
		   	url: "postdata.php",
		   	data: "id=1" + query_string,
				    	$("div#content").append("An error 
                                           occured during processing");
<span style="color:#00000;font-weight:bold">Select Your Languages</span><br>
		<input type="checkbox" name="checkbox_name" value="English">English<br>
		<input type="checkbox" name="checkbox_name" value="Hindi">Hindi<br>
		<input type="checkbox" name="checkbox_name" value="French">French<br>
		<input type="checkbox" name="checkbox_name" value="Japanese">Japanese<br>
		<input type="submit" id="submit" value='Submit' />

		<div id="content">The results will show up here.</div>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="jquery.js"></script>

The code


url : "

makes ajax call to postData.php file.

Following code intercepts the ajax call success and then sets the data into "content" div:

If return success then it OutPut 

When you run the program in browser it will look like following screen shot:


Check online demo of the application

Learn from experts! Attend jQuery Training classes.


[an error occurred while processing this directive]