Custom Green/Red Checkbox Status (HTML/CSS/JQuery/PHP)

Author: Zeeshan Arshad     690     07/09/2017

Estimated reading time: 1 minute, 0 seconds

This is the solution to have a custom checkbox with Green/Red status used for Add/Edit pages in PHP. This is given as a solution codes for the purpose of applying this solution in your existing PHP code so use it according to your situation.

Add Page:

Step: Input Checkbox

Step: CSS


Edit Page:

Show checked/unchecked checkbox according to database value


Back-end Page:

This code will check status of checkbox and we can store the value against True/False to save in our database. This will be used for add/edit pages.

$status = $_POST['status'];
if ($status == 1) {
$status = 'green';
} else {
$status = 'red'; 

JQuery for Add/Edit Page:

This code will perform behind the scene controlling of checkbox for Add/Edit pages using JQuery.









$(this).toggleClass('checked'); // change div to red/green

// if div is checked, set satus of checkbox to checked
if ($( ".class_checkbox" ).hasClass( "checked" )) {
$('input.input_class_checkbox').prop('checked', true);
} else {
$('input.input_class_checkbox').prop('checked', false);

Was this topic helpful?

Subscribe YouTube Channel

Zeeshan is a technical multipotentialite entrepreneur and expert in making custom apps/cms/tools.

Feel free to contact him with your clear message or problem.

Story  LinkedIn Profile  Courses  YouTube