CODEWITHSUNDEEP
javascriptjquery
Kenshinh
Kenshinh

Reputation: 173

Removing value from array according to index using splice()

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>

Upvotes: 0

Views: 592

Answers (4)

Mario Perez
Mario Perez

Reputation: 3367

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>

Upvotes: 1

epascarello
epascarello

Reputation: 207531

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>

Upvotes: 1

user9314530
user9314530

Reputation: 36

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>

Upvotes: 1

HERRERA
HERRERA

Reputation: 251

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>

Upvotes: 0

Related Questions