取消選中jquery中的復選框后如何洗掉靜態陣列

我有兩個復選框，每當我單擊任何復選框時，我都希望將它們的值（靜態陣列）插入“最終”陣列（空陣列）中。如果我取消選中該復選框，那么它的值（靜態陣列）應該從“最終陣列”中洗掉。

現在我正在將“靜態”陣列插入/推送到空白陣列（最終陣列）中，但我想知道在取消選中復選框后如何洗掉這個“靜態”陣列？

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>

uj5u.com熱心網友回復：

如評論中所述，您每次都可以重建陣列。

假設您想要一個一維陣列而不是陣列陣列，您可以使用

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>

同樣在小提琴：https ://jsfiddle.net/cwbvqmp4/

uj5u.com熱心網友回復：

您每次都需要從復選框中生成陣列

我建議一個物件，您可以在其中根據鍵獲取值

我重命名了類（國家） - 它與實際值不匹配（基于興趣的屬性）

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>

uj5u.com熱心網友回復：

當兩個復選框都有靜態陣列時，請使用如下條件。

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>

標籤：javascript php jQuery 数组

上一篇：試圖將QLabel的文本設定為類物件的__repr__并出現錯誤

下一篇：javascript按子物件值對嵌套的物件陣列進行分組