Question

0

180

Vistas

Add or Remove clicked Item from the Array list

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>

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

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>

about 4 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-04T12:04:12.212Z

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>

0

180

Add or Remove clicked Item from the Array list

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT