jQuery Custom Dropdown with Checkbox
by Vincy. Last modified on July 12th, 2022.
In this tutorial, I will present about creating a custom dropdown box which has list of options with checkboxes. In this custom UI field, multi-select option is also available.
I have managed to develop this with just few lines of code by using jQuery functions like toggle(), show() and hide().
In this example, I have used jQuery to toggle the dropdown. Each option contains checkbox and the caption. On clicking the checkbox or its caption, the option item is selected. The selected options are displayed in the browser when the user submitting the form.
In a previous tutorial, we have seen how to post values selected from a checkbox combo to PHP.
Custom Dropdown HTML
The following HTML code is used to create the custom dropdown. In this example, I have used static options for the custom dropdown. You can read options from database or other resources to display dynamic options.
I have options header and options list container in this HTML. Initially the options list are hidden and its display is toggled on clicking options header element.
<div id="checkbox-dropdown-container">
<form id="fromCustomSelect" name="fromCustomSelect" action=""
method="post">
<div>
<?php
if(!empty($_POST["toys"])) {
$selectedValues = implode(", ", $_POST["toys"]);
?>
<div class="result-list">
<div class="result-list-heading">The selected options are:</div>
<div>
<?php echo $selectedValues; ?>
</div>
</div>
<?php
}
?>
<div class="custom-select" id="custom-select">Select Multi
Options...</div>
<div id="custom-select-option-box">
<div class="custom-select-option">
<input onchange="toggleFillColor(this);"
class="custom-select-option-checkbox" type="checkbox"
name="toys[]" value="Fidget Spinner"> Fidget Spinner
</div>
<div class="custom-select-option">
<input onchange="toggleFillColor(this);"
class="custom-select-option-checkbox" type="checkbox"
name="toys[]" value="Lego Bricks"> Lego Bricks
</div>
<div class="custom-select-option">
<input onchange="toggleFillColor(this);"
class="custom-select-option-checkbox" type="checkbox"
name="toys[]" value="YoYo"> YoYo
</div>
<div class="custom-select-option">
<input onchange="toggleFillColor(this);"
class="custom-select-option-checkbox" type="checkbox"
name="toys[]" value="Barbie Doll"> Barbie Doll
</div>
</div>
</div>
<button type="submit" class="search btn">Submit</button>
</form>
</div>
jQuery Functions for Custom Multi-Select Dropdown
In this jQuery script, I have added functions to handle the custom dropdown toggle event and to select options. To simulate the default HTML dropdown, I have added jQuery functions to enable checkbox to select options on clicking the options caption.
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#custom-select").on("click", function() {
$("#custom-select-option-box").toggle();
});
function toggleFillColor(obj) {
$("#custom-select-option-box").show();
if ($(obj).prop('checked') == true) {
$(obj).parent().css("background", '#c6e7ed');
} else {
$(obj).parent().css("background", '#FFF');
}
}
$(".custom-select-option").on("click", function(e) {
var checkboxObj = $(this).children("input");
if ($(e.target).attr("class") != "custom-select-option-checkbox") {
if ($(checkboxObj).prop('checked') == true) {
$(checkboxObj).prop('checked', false)
} else {
$(checkboxObj).prop("checked", true);
}
}
toggleFillColor(checkboxObj);
});
$("body")
.on(
"click",
function(e) {
if (e.target.id != "custom-select"
&& $(e.target).attr("class") != "custom-select-option") {
$("#custom-select-option-box").hide();
}
});
</script>
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.