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

您使用错误的方法在代码中查找索引。如果您使用元素索引，它将避免数组中的实际索引并给出错误的输出。检查下面的代码，它可能适合您的要求。

 <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

我的方法是添加一个事件处理程序，该处理程序在单击任何这些输入时读取所有检查值，并在记录响应之前清空数组。无需为此添加任何依赖项

希望这是您正在寻找的

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 3

将更改处理程序添加到输入并使用 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 4

我不知道这是否是您需要的，以显示所选值的数组，如果您愿意，您可以调用计算支票的函数。

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