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/