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).
<?php
if($_POST['checkbox_name']!="")
{
echo "You have selected: ";
foreach ($_POST['checkbox_name'] as $checkbox_name)
{
$checkbox_name= htmlspecialchars($checkbox_name, ENT_QUOTES);
echo $checkbox_name, ' ', "\n";
}
}
else
{
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:
<html>
<head>
<title>JQuery Tutorial: C<title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#submit").click(
function()
{
var query_string = '';
$("input[@type='checkbox'][@name='checkbox_name']").each(
function()
{
if(this.checked)
{
query_string += "&checkbox_name[]=" + this.value;
}
});
$.ajax(
{
type: "POST",
url: "postdata.php",
data: "id=1" + query_string,
success:
function(t)
{
$("div#content").empty().append(t);
},
error:
function()
{
$("div#content").append("An error
occured during processing");
}
});
});
});
</script>
<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' />
<p> </p>
<div id="content">The results will show up here.</div>
</body>
</html>
Program explanation:
The following code includes the jQuery JavaScript library file:
<script type="text/javascript" src="jquery.js"></script>
The code
$("#submit").click
url : "postData.php",
...
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.