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"  name="interest" value="model">
      <label for="model">model</label>
    </div>
    <div>
      <input type="checkbox" id="Hostess"  name="interest" value="Hostess">
      <label for="hostess">Hostess</label>
    </div>

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

CodePudding user response：

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"  name="interest" value="model">
      <label for="model">model</label>
    </div>
    <div>
      <input type="checkbox" id="hostess"  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/

CodePudding user response：

You need to generate the array from the checked boxes each time

I suggest an object, where you can get the values based on key

I renamed the class (country) - it does not match the actual values (attributes based on interest)

let myArray;
let interests = {
  "model": ["Height", "size", "bust"],
  "hostess": ["Height", "bust"]
}

$("input:checkbox.interest").on("click", function() {
  myArray = $("input:checkbox.interest:checked")
    .map(function() { console.log(this.value,interests[this.value])
      return interests[this.value]
    }) // get checked boxes and their interests
    .get() // return an array
    .filter(val => val); // remove empty slots
  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"  name="interest" value="model">
      <label for="model">model</label>
    </div>
    <div>
      <input type="checkbox" id="Hostess"  name="interest" value="hostess">
      <label for="hostess">Hostess</label>
    </div>

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

CodePudding user response：

Use conditions like below while you have static array for both checkboxes.

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

$("input:checkbox.country").click(function() {
  var value = $(this).val();
    if(value === "model"){
      if (!$(this).is(":checked")){
        myarray.splice(myarray.indexOf(model), 1);
      } 
      else{
        myarray.push(model);
      }
    }
    else if(value === "Hostess"){
      if (!$(this).is(":checked")){
        myarray.splice(myarray.indexOf(Hostess), 1);
      } 
      else{
        myarray.push(Hostess);
      }
    }
  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"  name="interest" value="model">
      <label for="model">model</label>
    </div>
    <div>
      <input type="checkbox" id="Hostess"  name="interest" value="Hostess">
      <label for="hostess">Hostess</label>
    </div>

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