JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › smart-check-box collection on change event
Tagged: smart-check-box
- This topic has 1 reply, 2 voices, and was last updated 2 years, 10 months ago by Yavor Dashev.
-
AuthorPosts
-
January 10, 2022 at 3:34 pm #102763mario-m3eParticipant
I am currently testing the functionality of the smart-check-box for a current project.
What I have is a collection of smart-check-boxes dynamically created, they look like this with different values for id and value<smart-check-box id="17-4PH" name="materials" value="17-4PH" class="smart-element smart-check-box smart-toggle-box _init" type="checkbox" role="checkbox" tabindex="0" aria-checked="true" checked=""><div class="smart-container" role="presentation" smart-id="container"> <div class="smart-overlay" role="presentation"></div> <span class="smart-input" aria-hidden="true" smart-id="checkBoxInput"></span> <span class="smart-label" smart-id="checkBoxLabel">17-4PH</span> <input class="smart-hidden-input" type="hidden" smart-id="hiddenInput" name="materials" value="17-4PH"> </div></smart-check-box>
I have 28 of them in one collection.
What I need to do is trigger the change event and collect the value of the checked box in an array so I can use the values to query our database.I am working with a PHP MVC framework on this project.
Any help would be greatly appreciated.
Thank you,
Mario- This topic was modified 2 years, 10 months ago by mario-m3e.
January 11, 2022 at 4:44 pm #102770Yavor DashevParticipantHi Mario,
I have created a quick JavaScript code snippet to showcase how to achieve the functionality that you need and store the value of the checked checkbox.
<smart-check-box value="1">Check Box</smart-check-box> <smart-check-box value="1">Check Box</smart-check-box> <smart-check-box value="17-333123">Check Box</smart-check-box> <smart-check-box value="17-22">Check Box</smart-check-box> <smart-check-box value="17-321">Check Box</smart-check-box> <smart-check-box value="17-123">Check Box</smart-check-box> <smart-check-box value="17-111">Check Box</smart-check-box> <smart-check-box value="17-333331">Check Box</smart-check-box> <smart-check-box value="17-22">Check Box</smart-check-box> <smart-check-box value="17333">Check Box</smart-check-box> <smart-check-box value="17-4PH1111">Check Box</smart-check-box> <smart-check-box value="17-4PH2">Check Box</smart-check-box> <smart-check-box value="17-4PH1">Check Box</smart-check-box> <smart-check-box value="17-4PH123">Check Box</smart-check-box> <!-- scripts --> <script type="module" src="../../../source/modules/smart.checkbox.js"></script> <script > window.onload = function () { const allCheckBoxes = document.querySelectorAll("smart-check-box"); let checkedBoxesValues= [] Array.from(allCheckBoxes).forEach(checkBox => { checkBox.addEventListener('change', ()=> { checkedBoxesValues.push(checkBox.value) console.log(checkedBoxesValues) }) }) }; </script>
Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor DashevSmart UI Team
https://www.htmlelements.com/- This reply was modified 2 years, 10 months ago by Yavor Dashev.
- This reply was modified 2 years, 10 months ago by Yavor Dashev.
-
AuthorPosts
- You must be logged in to reply to this topic.