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

Author: Zeeshan Arshad     583     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.


$('.input_class_checkbox').each(function(){
$(this).hide().after('

 

');

});

$('.input_class_checkbox').each(function(){
$(this).hide().after('

 

');

});

$('.class_checkbox').on('click',function(){
$(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?

Yes
No
Subscribe YouTube Channel

Zeeshan is a multi-talented serial freelacncer, specialist in custom apps/cms/automation scripts and online instructor.

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

Story  LinkedIn Profile  Courses  YouTube