使用 splice() 根据索引从数组中删除值

Question

I have 4 checkboxes. I add values of them to an array on check. It looks like this.

Here are the four checkboxes I have.

<input type="checkbox" value="degree">
<input type="checkbox" value="pgd"> 
<input type="checkbox" value="hnd"> 
<input type="checkbox" value="advdip">

Once I check all four of them, the array becomes,

["degree", "pgd", "hnd", "advdip"]

When I uncheck a checkbox, I need to remove the value of it from the array according to its correct index number. I used splice() but it always removes the first index which is degree . I need to remove the value from the array according to its index number no matter which checkbox I unselect. Hope someone helps. Below is the code. Thanks in advance!

<input type="checkbox" value="degree">
    <input type="checkbox" value="pgd"> 
    <input type="checkbox" value="hnd"> 
    <input type="checkbox" value="advdip">

<script>

        function getLevels() {
             // get reference to container div of checkboxes
            var con = document.getElementById('course-levels');
            // get reference to input elements in course-levels container
            var inp = document.getElementsByTagName('input');

            // create array to hold checkbox values
            var selectedValues = [];

            // collect each input value on click
            for (var i = 0; i < inp.length; i++) {
                // if input is checkbox
                if (inp[i].type === 'checkbox') {
                    // on each checkbox click
                    inp[i].onclick = function() {
                        if ($(this).prop("checked") == true) {

                            selectedValues.push(this.value);
                            console.log(selectedValues);
                        }
                        else if ($(this).prop("checked") == false) {
                            // get index number
                            var index = $(this).index();

                            selectedValues.splice(index, 1);
                            console.log(selectedValues);

                        }
                    }
                }
            }


        }

        getLevels();

    </script>

Answer 1

You used the wrong way to find index in your code. If you used element index, it will avoid real index in your array and gives the wrong output. Check below code, it may be work for you requirement.

 <input type="checkbox" value="degree">
    <input type="checkbox" value="pgd"> 
    <input type="checkbox" value="hnd"> 
    <input type="checkbox" value="advdip">

    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>

        function getLevels() {
             // get reference to container div of checkboxes
            var con = document.getElementById('course-levels');
            // get reference to input elements in course-levels container
            var inp = document.getElementsByTagName('input');

            // create array to hold checkbox values
            var selectedValues = [];

            // collect each input value on click
            for (var i = 0; i < inp.length; i++) {
                // if input is checkbox
                if (inp[i].type === 'checkbox') {
                    // on each checkbox click
                    inp[i].onclick = function() {
                        if ($(this).prop("checked") == true) {

                            selectedValues.push(this.value);
                            console.log(selectedValues);
                        }
                        else if ($(this).prop("checked") == false) {
                            // get index number
                            var index = selectedValues.indexOf(this.value);

                            selectedValues.splice(index, 1);
                            console.log(selectedValues);

                        }
                    }
                }
            }


        }

        getLevels();

    </script>

Answer 2

Add change handler to the inputs and use jQuery map to get the values of the checked inputs.

 var levels $('#checkArray input').on('change', function () { levels = $('#checkArray input:checked').map(function () { return this.value }).get() console.log(levels) }).eq(0).change()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <fieldset id="checkArray"> <input type="checkbox" value="degree" checked> <input type="checkbox" value="pgd"> <input type="checkbox" value="hnd"> <input type="checkbox" value="advdip"> </fieldset>

Answer 3

my approach was to add an event handler that reads all checked values when any of those inputs is clicked and empty the array before loging the response. no need to add any dependencies with this one

Hope this is what you are looking for

 function getLevels() { let checkboxContainer = document.getElementById("checkboxContainer"); let inputs = checkboxContainer.querySelectorAll("input"); let checked = []; inputs.forEach( (input) => { checked = []; input.addEventListener( 'click', () => { checked = []; inputs.forEach( (e) => { e.checked? checked.push(e.value): null; }) console.log(checked); }); }); } getLevels();

 <div id="checkboxContainer"> <input type="checkbox" value="degree" > <input type="checkbox" value="pgd"> <input type="checkbox" value="hnd"> <input type="checkbox" value="advdip"> </div>

Answer 4

I don't know if this is what you need, to show an array of the selected values, if you want you can call the function that calculates on the check.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <fieldset id="checkArray"> <input type="checkbox" value="degree" checked> <input type="checkbox" value="pgd"> <input type="checkbox" value="hnd"> <input type="checkbox" value="advdip"> </fieldset> <button onclick="getLevels()">getLevels</button> <script> function getLevels() { var levels = []; $.each($("input:checked"), function() { levels.push(($(this).val())); }); console.log(levels); } getLevels(); </script>