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

您使用错误的方法在代码中查找索引。如果您使用元素索引，它将避免数组中的实际索引并给出错误的输出。检查下面的代码，它可能适合您的要求。&nbsp;<input type="checkbox" value="degree">&nbsp; &nbsp; <input type="checkbox" value="pgd">&nbsp;&nbsp; &nbsp; <input type="checkbox" value="hnd">&nbsp;&nbsp; &nbsp; <input type="checkbox" value="advdip">&nbsp; &nbsp; <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script><script>&nbsp; &nbsp; &nbsp; &nbsp; function getLevels() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// get reference to container div of checkboxes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var con = document.getElementById('course-levels');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // get reference to input elements in course-levels container&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inp = document.getElementsByTagName('input');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // create array to hold checkbox values&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var selectedValues = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // collect each input value on click&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < inp.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // if input is checkbox&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (inp[i].type === 'checkbox') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // on each checkbox click&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inp[i].onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(this).prop("checked") == true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedValues.push(this.value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(selectedValues);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if ($(this).prop("checked") == false) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // get index number&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var index = selectedValues.indexOf(this.value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedValues.splice(index, 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(selectedValues);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; getLevels();&nbsp; &nbsp; </script>

Answer 2

我的方法是添加一个事件处理程序，该处理程序在单击任何这些输入时读取所有检查值，并在记录响应之前清空数组。无需为此添加任何依赖项希望这是您正在寻找的function getLevels() {&nbsp; let checkboxContainer = document.getElementById("checkboxContainer");&nbsp; let inputs = checkboxContainer.querySelectorAll("input");&nbsp; let checked = [];&nbsp; inputs.forEach( (input) => {&nbsp; &nbsp; checked = [];&nbsp; &nbsp; input.addEventListener( 'click', () => {&nbsp; &nbsp; &nbsp; checked = [];&nbsp; &nbsp; &nbsp; inputs.forEach( (e) => {&nbsp; &nbsp; &nbsp; &nbsp; e.checked ? checked.push(e.value) : null;&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; console.log(checked);&nbsp; &nbsp; });&nbsp; });}getLevels();<div id="checkboxContainer">&nbsp;&nbsp;&nbsp; <input type="checkbox" value="degree" >&nbsp; <input type="checkbox" value="pgd">&nbsp;&nbsp; <input type="checkbox" value="hnd">&nbsp;&nbsp; <input type="checkbox" value="advdip"></div>

Answer 3

将更改处理程序添加到输入并使用 jQuery map 来获取检查输入的值。var levels$('#checkArray input').on('change', function () {&nbsp; levels = $('#checkArray input:checked').map(function () {&nbsp; &nbsp; return this.value&nbsp; }).get()&nbsp; 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">&nbsp; <input type="checkbox" value="degree" checked>&nbsp; <input type="checkbox" value="pgd">&nbsp; <input type="checkbox" value="hnd">&nbsp; <input type="checkbox" value="advdip"></fieldset>

Answer 4

我不知道这是否是您需要的，以显示所选值的数组，如果您愿意，您可以调用计算支票的函数。<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><fieldset id="checkArray">&nbsp; <input type="checkbox" value="degree" checked>&nbsp; <input type="checkbox" value="pgd">&nbsp; <input type="checkbox" value="hnd">&nbsp; <input type="checkbox" value="advdip"></fieldset><button onclick="getLevels()">getLevels</button><script>&nbsp; function getLevels() {&nbsp; &nbsp; var levels = [];&nbsp; &nbsp; $.each($("input:checked"), function() {&nbsp; &nbsp; &nbsp; levels.push(($(this).val()));&nbsp; &nbsp; });&nbsp; &nbsp; console.log(levels);&nbsp; }&nbsp; getLevels();</script>