smart-check-box collection on change event

[mario-m3e]

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, 3 months ago by mario-m3e.

[Yavor Dashev]

Hi 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 Dashev

Smart UI Team
https://www.htmlelements.com/

 

• This reply was modified 2 years, 3 months ago by Yavor Dashev.
• This reply was modified 2 years, 3 months ago by Yavor Dashev.

[Author]

Posts