Add or Remove clicked Item from the Array list-CodePudding

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  id="userlist">
    <li  onclick="theFunction(event)" id="first-wrapper">
        <input  type="checkbox" value="first" id="first">
        <label  for="first">First checkbox</label>
    </li>
    <li  onclick="theFunction(event)" id="second-wrapper">
        <input  type="checkbox" value="second"  id="second">
        <label  for="second">Second checkbox</label>
    </li>
    <li  onclick="theFunction(event)" id="third-wrapper">
        <input  type="checkbox" value="third"  id="third">
        <label  for="third">Third checkbox</label>
    </li>
    <li  onclick="theFunction(event)" id="fourth-wrapper">
        <input  type="checkbox" value="fourth"  id="fourth">
        <label  for="fourth">Fourth checkbox</label>
    </li>
    <li  onclick="theFunction(event)" id="fifth-wrapper">
        <input  type="checkbox" value="fifth"  id="fifth">
        <label  for="fifth">Fifth checkbox</label>
    </li>
</ul>

CodePudding user response：

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  id="userlist">
  <li  id="first-wrapper">
    <input  type="checkbox" value="first" id="first" onclick="theFunction(event)">
    <label for="first">First checkbox</label>
  </li>
  <li  id="second-wrapper">
    <input  type="checkbox" value="second" id="second" onclick="theFunction(event)">
    <label for="second">Second checkbox</label>
  </li>
  <li  id="third-wrapper">
    <input  type="checkbox" value="third" id="third" onclick="theFunction(event)">
    <label for="third">Third checkbox</label>
  </li>
  <li  id="fourth-wrapper">
    <input  type="checkbox" value="fourth" id="fourth" onclick="theFunction(event)">
    <label for="fourth">Fourth checkbox</label>
  </li>
  <li  id="fifth-wrapper">
    <input  type="checkbox" value="fifth" id="fifth" onclick="theFunction(event)">
    <label for="fifth">Fifth checkbox</label>
  </li>
</ul>

CodePudding user response：

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  id="userlist">
  <li  id="first-wrapper">
    <input  onclick="theFunction(this)" type="checkbox" value="first" id="first">
    <label for="first">First checkbox</label>
  </li>
  <li  id="second-wrapper">
    <input  onclick="theFunction(this)" type="checkbox" value="second" id="second">
    <label for="second">Second checkbox</label>
  </li>
  <li  id="third-wrapper">
    <input  change=" theFunction(this)" type="checkbox" value="third" id="third">
    <label for="third">Third checkbox</label>
  </li>
  <li  id="fourth-wrapper">
    <input  onclick="theFunction(this)" type="checkbox" value="fourth" id="fourth">
    <label for="fourth">Fourth checkbox</label>
  </li>
  <li  id="fifth-wrapper">
    <input  onclick="theFunction(this)" type="checkbox" value="fifth" id="fifth">
    <label for="fifth">Fifth checkbox</label>
  </li>
</ul>