Удаление значения из массива по индексу с помощью 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

Мой подход состоял в том, чтобы добавить обработчик событий, который читает все проверенные значения при щелчке по любому из этих входов и очищает массив перед регистрацией ответа. нет необходимости добавлять какие-либо зависимости с этим

Надеюсь, это то, что вы ищете

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 2

Вы использовали неправильный способ найти индекс в своем коде. Если вы использовали элемент index, он позволит избежать реального индекса в вашем массиве и даст неправильный вывод. Проверьте ниже код, это может работать для вас требование.

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

Добавьте обработчик изменений к входам и используйте карту jQuery, чтобы получить значения проверенных входов.

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>