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>

You event is being "called" twice because you have the click event on the li. Add `event.preventDefault();` as the first line inside your function — Carsten Løvbo Andersen, Jan 31 '22 at 13:21
yeah that helped against that issue. But still waiting for complete answer. Thanks. — DnD2k21, Jan 31 '22 at 13:24
"I tried and it didn't work" is too vague. What exact code you tried, and what exactly happened? As for the function, with the current setup it is defined to be called whenever anu list item is clicked. — Noam, Jan 31 '22 at 13:24

Nitheesh · Accepted Answer · 2022-01-31T13:53:26.333

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>

This one works perfectly just one Problem that if i click on Li area which includes padding too, and not on input directly or on label directly then it's not working.. That's why i wanted to call that function from Li. If u make changes, then i can accept this. Thanks. — DnD2k21, Jan 31 '22 at 13:41

Carsten Løvbo Andersen · Answer 2 · 2022-02-01T08:51:38.773

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" onclick="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>

- does not work on first time, - i want click event on li because label and input have some padding and if user click on padding area, it should also work. — DnD2k21, Jan 31 '22 at 13:43
Change padding to margin, It will not work correct if you have the click event on li. Because when you click on input or label, you also trigger a click on li. And if you use `event.preventDefault()` to stop the second click, then it will stop the click from the input or label. thats means the checkbox will never change or register changes — Carsten Løvbo Andersen, Jan 31 '22 at 14:08
@DnD2k21 Happy it works, but i wonder how you then can say that mine does not work with click on input, but hes example is also click on input. — Carsten Løvbo Andersen, Jan 31 '22 at 14:32
I am saying this because ur code has some issue. Please test it. Click first, second and third checkbox.. And see the output on console.. Thanks. — DnD2k21, Feb 01 '22 at 08:34
@DnD2k21 there was a simple misstype, still does not explain your statement about placing the click event on the input. — Carsten Løvbo Andersen, Feb 01 '22 at 08:52

Add or Remove clicked Item from the Array list

2 Answers2