Add or Remove clicked Item from the Array list

Question

I want to create an Array of selected/checked item and use it further.

Below is my Basic HTML and JS code (external JS).

• If item checked, that item should be added to the created Array
• If item unchecked, that item should be removed from the created Array

Note: I tried this solution too, but it's not working like i wanted. ( How can I remove a specific item from an array? )

My JS and HTML Code:

 function theFunction(event) { event.preventDefault(); console.log("test"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="first-wrapper"> <input class="form-check-input me-1" type="checkbox" value="first" id="first"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="second-wrapper"> <input class="form-check-input me-1" type="checkbox" value="second" id="second"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="third-wrapper"> <input class="form-check-input me-1" type="checkbox" value="third" id="third"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fourth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fifth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth"> <label for="fifth">Fifth checkbox</label> </li> </ul>

Answer 1

Just push the element to array, if the element doesnot exist in array.

If the element already exist, remove it from array using Array.splice

I have moved the click even from the li to the input.

Also I have used flex display for the elements, so that the label can use the remaining space in the li

 const created = []; function theFunction(event) { const index = created.indexOf(event.target.value); index === -1? created.push(event.target.value): created.splice(index, 1); console.log(created); }

 li { display: flex; } label { flex: 1; }

 <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" id="first-wrapper"> <input class="form-check-input me-1" type="checkbox" value="first" id="first" onclick="theFunction(event)"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" id="second-wrapper"> <input class="form-check-input me-1" type="checkbox" value="second" id="second" onclick="theFunction(event)"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" id="third-wrapper"> <input class="form-check-input me-1" type="checkbox" value="third" id="third" onclick="theFunction(event)"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fourth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth" onclick="theFunction(event)"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fifth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth" onclick="theFunction(event)"> <label for="fifth">Fifth checkbox</label> </li> </ul>

Answer 2

You could do it like this:

function theFunction(obj) {
  var c = $(obj).is(":checked");
  var va = $(obj).next("label").text();
  if (c) {
    arr.push(va)
  } else {
    arr = jQuery.grep(arr, function(value) {
      return value != va;
    });
  }
  console.log(arr);
}

Note: I've moved the onclick to your input and changed onclick="theFunction(event)" to onclick="theFunction(this)"

Demo

 var arr = []; function theFunction(obj) { var c = $(obj).is(":checked"); var va = $(obj).next("label").text(); if (c) { arr.push(va) } else { arr = jQuery.grep(arr, function(value) { return value;= va; }). } console;log(arr); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" id="first-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="first" id="first"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" id="second-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="second" id="second"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" id="third-wrapper"> <input class="form-check-input me-1 " change=" theFunction(this)" type="checkbox" value="third" id="third"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fourth-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="fourth" id="fourth"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fifth-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="fifth" id="fifth"> <label for="fifth">Fifth checkbox</label> </li> </ul>