Skip to content
Advertisement

How to remove static array after uncheck checkbox in jquery

I have two checkboxes, and I want whenever I click on any checkbox then their values (static array) should be inserted into “final” array (empty array). If I uncheck that checkbox then its value (static array) should be remove from “final array”.

Right now I am inserting/pushing “static” array into blank array (final array), but I want to know that how can I remove this “static” array after uncheck checkbox ?

var myarray = [];
var model = ["Height", "size", "bust"];
var Hostess = ["Height", "bust"];

$("input:checkbox.country").click(function() {
  var value = $(this).val();
  if (!$(this).is(":checked"))
    alert('you are unchecked ' + $(this).val());

  else
    myarray.push(model);
});
console.log('Final array is ', myarray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="model" class="country" name="interest" value="model">
      <label for="model">model</label>
    </div>
    <div>
      <input type="checkbox" id="Hostess" class="country" name="interest" value="Hostess">
      <label for="hostess">Hostess</label>
    </div>

    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

Advertisement

Answer

As noted in the comments, you can rebuild the array each time.

Assuming you want a 1-dimensional array rather than an array of arrays, you can use

myarray.push(...modelarray);

to add the array items.

I’ve used a switch here to match the checkbox value with the array variable, but a better solution for this part (already provided in another answer) is to use an object and get the array by key. I’ve kept this with the switch to show the difference and use of .push(...array)

var myarray = [];
var modelarray = ["A", "B", "C"];
var hostessarray = ["X", "Y"];

$("input:checkbox.country").click(function() {

  // rebuild myarray
  myarray = [];
  $("input:checkbox.country:checked").each(function() {
      switch ($(this).val())
      {
       case "model":
           myarray.push(...modelarray);
           break;
       case "hostess":
           myarray.push(...hostessarray);
           break;
      }
  });
  
  console.log('Updated array is ', myarray);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="model" class="country" name="interest" value="model">
      <label for="model">model</label>
    </div>
    <div>
      <input type="checkbox" id="hostess" class="country" name="interest" value="hostess">
      <label for="hostess">hostess</label>
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

Also in fiddle: https://jsfiddle.net/cwbvqmp4/

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement