Check whether a checkbox is checked with JavaScript.
Display some text when the checkbox is checked:
Checkbox:Checkbox is CHECKED!
Check Whether a Checkbox is Checked
Step 1) Add HTML:Example
Checkbox:
Checkbox is CHECKED!
Step 2) Add JavaScript:Example
function myFunction() {
// Get the checkbox
var checkBox = document.getElementById("myCheck");
// Get the output text
var text = document.getElementById("text");
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
In this tutorial, you can find comprehensive information on how to read whether a checkbox is checked in PHP.
Here, we will demonstrate two handy functions that will assist you in reading whether a checkbox is checked in PHP. Those functions are isset() and empty().
This is an inbuilt function that is capable of checking whether a variable is set.
With the isset() function, you can also check whether an array, a declared variable, or an array key is null. The isset() function returns false if it does and true in all the possible situations.
When you use it in your form and try to read all checked values as any other elements like – text box, text area, radio button, etc.
Get values of multiple checked chec...
Please enable JavaScript
Get values of multiple checked checkboxes and save to MySQL - PHPecho $_POST['lang']; // Checkbox elementyou will get the last checked value.
You need to send the checkboxes value in the form of an Array when the form gets submitted then you can loop over $_POST values.
Demo Download
Contents
1. Read $_POST checked values
HTML
While creating multiple checkboxes add [] at the end of name attribute e.g. lang[]. Here, [] denotes an Array.
<span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>PHP
When the form is submitted then loop over <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>0 checkbox name using <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>1.
if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }Completed Code
2. Demo
View Demo
3. Table structure
I am using <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>2 table in the example.
CREATE TABLE `languages` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `language` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;4. Configuration
Create a new <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>3 file.
Completed Code
<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }5. Insert and Display checked values from Database
Create an Array <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>4 to store languages names.
Using this to create checkboxes by looping on it.
Insert –
On <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>5 submit convert <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>6 to string using <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>7. Check entry in <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>2 table if not exists then insert <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>9 in the table otherwise, update if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }0 value.
Display –
Fetch record from <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>2 table. If a record exists then explode if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }2 to get an Array and assign in if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }3.
While looping on <span>Select languages</span><br/> <input type="checkbox" name='lang[]' value="PHP"> PHP <br/> <input type="checkbox" name='lang[]' value="JavaScript"> JavaScript <br/> <input type="checkbox" name='lang[]' value="jQuery"> jQuery <br/> <input type="checkbox" name='lang[]' value="Angular JS"> Angular JS <br/>4 Array check if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }5 value exists in if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }3 Array. If exists then assign if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }7 to if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { foreach($_POST['lang'] as $value){ echo "value : ".$value.'<br/>'; } } }8 and use in the checkbox creation.
Completed Code
<?php include "config.php"; ?> <!doctype html> <html> <head> <?php if(isset($_POST['submit'])){ if(!empty($_POST['lang'])) { $lang = implode(",",$_POST['lang']); // Insert and Update record $checkEntries = mysqli_query($con,"SELECT * FROM languages"); if(mysqli_num_rows($checkEntries) == 0){ mysqli_query($con,"INSERT INTO languages(language) VALUES('".$lang."')"); }else{ mysqli_query($con,"UPDATE languages SET language='".$lang."' "); } } } ?> </head> <body> <form method="post" action=""> <span>Select languages</span><br/> <?php $checked_arr = array(); // Fetch checked values $fetchLang = mysqli_query($con,"SELECT * FROM languages"); if(mysqli_num_rows($fetchLang) > 0){ $result = mysqli_fetch_assoc($fetchLang); $checked_arr = explode(",",$result['language']); } // Create checkboxes $languages_arr = array("PHP","JavaScript","jQuery","AngularJS"); foreach($languages_arr as $language){ $checked = ""; if(in_array($language,$checked_arr)){ $checked = "checked"; } echo '<input type="checkbox" name="lang[]" value="'.$language.'" '.$checked.' > '.$language.' <br/>'; } ?> <input type="submit" value="Submit" name="submit"> </form> </body> </html>6. Conclusion
Next time when you use multiple checkboxes in your form then just initialize the name as an Array by putting [] in front and read it with loop when submitted.