In a case where you a user can select more than one value from the options provided, it will be necessary not to limit the user to only one option as it is the case with most systems.
Checkboxes are form input elements that are provided to users such that they can select the value which fits their answer by checking or ticking the box provided next to the value
While using checkboxes, the value associated with the checkbox is predefined or prefilled before such that the user will not have to key in their answer but they will be required to check which answer fits them and then submit.
In this article, we shall discuss how you can submit multiple checkbox values using jQuery such that one will not be limited to only one option.
Checkbox syntax in html
As we highlighted above, checkbox is a form input element and it is defined as below
<label>Checkbox 1</label>
<input type="checkbox" id="checkbox1" value="checkbox 1 value" name="checkbox1">
The type checkbox defines the checkbox
The value is the value that is held by the checkbox and when submitted that is the value that will be processed
You can either use id or name depending on how you want to submit values to the server-side for processing. Id is used when you want to submit values as single elements and name is used when you want to submit form values using the submit function other than click.
When using id attribute, you use the click function for the button as shown below
<script>
$(function () {
$("#submit_button").click(function () {
});
});
</script>
When using name attribute to submit form data we use the submit function as shown below
<script>
$(function () {
$("#formid").submit(function(e){
e.preventDefault();
});
});
</script>
To submit multiple checkbox values,
- First, you will need to define the multiple checkboxes in html as shown below
<!DOCTYPE html>
<html>
<head>
<title>multiple checkbox values</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<h3>Submit Multiple checkbox values</h3>
<form id="checkbox_form" method="POST">
<div class="input-group">
<label>Checkbox 1</label>
<input type="checkbox" id="checkbox1" value="checkbox 1 value" name="checkbox1">
</div>
<div class="input-group">
<label>Checkbox 2</label>
<input type="checkbox" id="checkbox2" value="checkbox 2 value" name="checkbox2">
</div>
<div class="input-group">
<label>Checkbox 3</label>
<input type="checkbox" id="checkbox3" value="checkbox 3 value" name="checkbox3">
</div>
<div class="input-group">
<label>Checkbox 4</label>
<input type="checkbox" id="checkbox4" value="checkbox 4 value" name="checkbox4">
</div>
<div class="input-group">
<label>Checkbox 5</label>
<input type="checkbox" id="checkbox5" value="checkbox 5 value" name="checkbox5">
</div>
<button type="submit" id="submitcheckbox" class="btn btn-sm btn-success">Submit values</button>
</form>
</body>
</html>
As defined above, ensure you set the form method to post and also add the form id attribute if you want to submit using name
- Next, include jQuery link before the script that will be used to submit the multiple checkboxes values
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- Next, create the script that will collect the multiple checkboxes values
First, you will need to create an empty array
//create an empty array
var selected_checkboxes = new Array();
Next, once each checkbox is ticked or checked push the value to the empty array defined above as follows
//add each selected checkbox value to the array
$("#checkbox_form input[type=checkbox]:checked").each(function () {
selected_checkboxes.push(this.value);
});
Next, to ensure that you do not submit an empty value when no checkbox is selected check that the length of the array is not zero
//display selected values using alert
if (selected_checkboxes.length > 0) {
alert("The selected checkbox values are : " + selected_checkboxes.join(","));
}else{
alert("no value is selected")
}
- To submit multiple checkboxes values, use the script code below
Please note the comments added that will guide you so that you can update where needed
<script>
$(function () {
$("#checkbox_form").submit(function(e){
e.preventDefault();
//create an empty array
var selected_checkboxes = new Array();
//add each selected checkbox value to the array
$("#checkbox_form input[type=checkbox]:checked").each(function () {
selected_checkboxes.push(this.value);
});
var formData=new FormData(this);
formData.append('checkboxvalues', selected_checkboxes.join(","));
//display selected values using alert
if (selected_checkboxes.length > 0) {
alert("The selected checkbox values are : " + selected_checkboxes.join(","));
$.ajax({
// method used to send data for processing is POST
method: "POST",
// location of the file that will process data
url: "submit-values",
// the form data from the input
data: formData,
cache:false
}).done(function(data){
if(data.status == "200"){
alert(" values submitted successfully ");
}
if(data.status == "300"){
alert(" an error encountered ");
}
});
}else{
alert("no value is selected")
}
});
});
</script>
If you want to extract values from the array in the PHP after the values have been submitted follow this previous article where we discussed how to work with arrays in PHP
The full code for defining multiple checkboxes and submit selected values is as below
<!DOCTYPE html>
<html>
<head>
<title>multiple checkbox values</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<h3>Submit Multiple checkbox values</h3>
<form id="checkbox_form" method="POST">
<div class="input-group">
<label>Checkbox 1</label>
<input type="checkbox" id="checkbox1" value="checkbox 1 value" name="checkbox1">
</div>
<div class="input-group">
<label>Checkbox 2</label>
<input type="checkbox" id="checkbox2" value="checkbox 2 value" name="checkbox2">
</div>
<div class="input-group">
<label>Checkbox 3</label>
<input type="checkbox" id="checkbox3" value="checkbox 3 value" name="checkbox3">
</div>
<div class="input-group">
<label>Checkbox 4</label>
<input type="checkbox" id="checkbox4" value="checkbox 4 value" name="checkbox4">
</div>
<div class="input-group">
<label>Checkbox 5</label>
<input type="checkbox" id="checkbox5" value="checkbox 5 value" name="checkbox5">
</div>
<button type="submit" id="submitcheckbox" class="btn btn-sm btn-success">Submit values</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#checkbox_form").submit(function(e){
e.preventDefault();
//create an empty array
var selected_checkboxes = new Array();
//add each selected checkbox value to the array
$("#checkbox_form input[type=checkbox]:checked").each(function () {
selected_checkboxes.push(this.value);
});
var formData=new FormData(this);
formData.append('checkboxvalues', selected_checkboxes.join(","));
//display selected values using alert
if (selected_checkboxes.length > 0) {
alert("The selected checkbox values are : " + selected_checkboxes.join(","));
$.ajax({
// method used to send data for processing is POST
method: "POST",
// location of the file that will process data
url: "submit-values",
// the form data from the input
data: formData,
cache:false
}).done(function(data){
if(data.status == "200"){
alert(" values submitted successfully ");
}
if(data.status == "300"){
alert(" an error encountered ");
}
});
}else{
alert("no value is selected")
}
});
});
</script>
</body>
</html>
Conclusion
From the above discussion, we have explained how you can define multiple checkboxes which are part of form input group and also discussed how to submit the checkbox values using jQuery using push which adds the selected values to the defined array
