如何在jquery中取消复选框后删除静态数组

Question

我有两个复选框，我希望每当我点击任何复选框时，它们的值(静态数组)应该插入到"final"数组(空数组)。如果我取消选中该复选框，那么它的值(静态数组)应该从&;final array&;中删除。

现在我正在插入/推送"static"数组变成空白数组(final数组)，但是我想知道如何移除这个"static">

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>

Answer 1

如注释中所述，每次都可以重新构建数组。

假设您想要一个一维数组而不是数组的数组，您可以使用

myarray.push(...modelarray);

添加数组项。

我在这里使用switch来匹配复选框值与数组变量，但是这部分的更好的解决方案(已经在另一个答案中提供)是使用对象并按键获取数组。我将其与switch保持一致，以显示.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>

也在fiddle: https://jsfiddle.net/cwbvqmp4/

Answer 2

您需要从每次选中的框中生成数组

我建议一个对象，您可以根据键

获得值我重命名了类(国家)-它不匹配实际值(基于兴趣的属性)

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

Answer 3

当两个复选框都有静态数组时，请使用如下条件:

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