My custom select dropdown includes checkboxes that are hidden until the user clicks on the dropdown:
---Select----
-option1-
-option2-
-option3-
When a user clicks on the Select, the options appear as checkboxes. I want to be able to retrieve the labels of the selected checkboxes and display them in the "select" field. Additionally, I need to figure out how to reset the text back to "Select" if all checkboxes are deselected.
The JavaScript code for this custom select function looks like this:
$('.custom-select').click(function() {
$(this).children('.custom-select-drop').toggleClass('not-showed');
)};
Each checkbox receives a selected class when it is checked.
EDIT: The HTML structure is as follows:
<div class="custom-select">
<span class="selectTitle">Something</span>
<div class="custom-select-drop not-showed">
<label for="check1">
<input type="checkbox" class="ch" id="check1" />Check1
</label>
<label for="check2">
<input type="checkbox" class="ch" id="check2" />Check2
</label>
<label for="check3">
<input type="checkbox" class="ch" id="check3" />Check3
</label>
If a user selects check2 and check3, I want to extract their label texts (Check2 and Check3) and replace the initial text ("Something") inside the span. When the user deselects the checkboxes, the text should revert back to "Something".