使用 splice() 根據索引從數組中刪除值

Question

我有 4 個復選框。 我在檢查時將它們的值添加到數組中。 看起來像這樣。

這是我的四個復選框。

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

一旦我檢查了所有四個，數組就變成了，

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

當我取消選中復選框時，我需要根據正確的索引號從數組中刪除它的值。 我使用splice()但它總是刪除第一個索引degree 。 無論我取消選擇哪個復選框，我都需要根據其索引號從數組中刪除值。 希望有人幫忙。 下面是代碼。 提前致謝！

<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

您使用錯誤的方法在代碼中查找索引。 如果您使用元素索引，它會避免在數組中使用真正的索引並給出錯誤的 output。檢查下面的代碼，它可能適合您的要求。

 <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

將更改處理程序添加到輸入並使用 jQuery map 獲取已檢查輸入的值。

 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

我的方法是添加一個事件處理程序，該事件處理程序在單擊任何這些輸入時讀取所有選中的值，並在記錄響應之前清空數組。 無需為此添加任何依賴項

希望這就是您要找的

 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

我不知道這是否是您需要的，以顯示所選值的數組，如果您願意，可以調用在支票上計算的 function。

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