如何将在 for 循环中选中的复选框中的数组值推送到另一个数组？

Question

出于我正在做的事情的目的，我使用了一个 for 循环来从之前的数组创建复选框，而不是通过 html 来创建复选框。此循环从玩家数组中获取对象的 .name 值，并将其显示为一个复选框，如果该玩家想玩，则可以选中该复选框。

let playing = [];//8 players maximum

//array displayed as check boxes
var players = [
  {"name": "Tyler", "score": 4},
  {"name": "Nick", "score": 4},
  {"name": "Patrick score 3", "score": 3},
  {"name": "Jack", "score": 3},
  {"name": "Aboss", "score": 3},
  {"name": "Colin", "score": 1}, 
  {"name": "Sling", "score": 1},
  {"name": "Joe", "score": 2},
  {"name": "Terrrence", "score": 2},
  {"name": "Scott", "score": 4},
]

//loop to display players[] as checkboxes
var myDiv = document.getElementById("cboxes");

for (var i = 0; i < players.length; i++) {
    var checkBox = document.createElement("input");
    var label = document.createElement("label");
    checkBox.type = "checkbox";
    checkBox.value = players[i];
    myDiv.appendChild(checkBox);
    myDiv.appendChild(label);
    label.appendChild(document.createTextNode(players[i].name));
}

我无法弄清楚如何将对象从选定的框中推送到一个名为 playing 的新数组（或至少是名称值），因为稍后我将需要使用与名称关联的 .score 值以及。如果选择的玩家多于或少于 8 人，我还想包含一条错误消息。我有一个 html 按钮：

<button onclick="checkCheckbox()">Push to playing array</button> <br>

这是我按下按钮时的占位符函数：

function checkCheckbox(){
  playing.push(document.getElementById("cboxes"));
}

谢谢书呆子们

Answer 1

如果我没有正确理解你的问题，请将玩家姓名和分数推送到 playing 数组。

如果您想将分数设置为每个复选框的值，您需要使用 .score 指定它 checkBox.value = players[i].score

let playing = [];//8 players maximum

//array displayed as check boxes
let players = [
  {"name": "Tyler", "score": 4},
  {"name": "Nick", "score": 4},
  {"name": "Patrick", "score": 3},
  {"name": "Jack", "score": 3},
  {"name": "Aboss", "score": 3},
  {"name": "Colin", "score": 1}, 
  {"name": "Sling", "score": 1},
  {"name": "Joe", "score": 2},
  {"name": "Terrrence", "score": 2},
  {"name": "Scott", "score": 4},
]

//loop to display players[] as checkboxes
let myDiv = document.getElementById("cboxes");

for (let i = 0; i < players.length; i++) {
    let checkBox = document.createElement("input");
    let label = document.createElement("label");
    checkBox.type = "checkbox";
    checkBox.value = players[i].score;
    checkBox.id = 'player-'+i;
    label.htmlFor = 'player-'+i;
    myDiv.appendChild(checkBox);
    myDiv.appendChild(label);
    label.appendChild(document.createTextNode(players[i].name));
}

function checkCheckbox(){

  let checkedPlayers = document.querySelectorAll('#cboxes input');
  let amountOfPlayers = 0;
  playing = [];
  
  for(let i = 0; i < checkedPlayers.length; i++){
    if(checkedPlayers[i].checked){
        amountOfPlayers++;
      playing.push(
        {"name": checkedPlayers[i].nextSibling.textContent,
         "score":checkedPlayers[i].value
        }
      )
    }
  }
  
  if(amountOfPlayers != 8){
    let errMessage = amountOfPlayers < 8 ? 'You only selected '+amountOfPlayers+ ' players, make sure to select 8 players' : 'You have selected too many players (8 max).';
    alert(errMessage);
  } else {
    alert('All good, 8 players have been selected, time to play!');
    // we have our 8 players:
    console.log(playing);
  }
}

<div id="cboxes"></div>

<button onclick="checkCheckbox()">Push to playing array</button> <br>

Answer 2

以下内容应该可以实现您的所有目标！

需要注意的一件事是，每次按下按钮时，该函数都会擦除正在播放的数组并从一个空数组填充它，我认为这比检查数组中的重复对象要容易得多。

let playing = [];//8 players maximum

//array displayed as check boxes
const players = [
  {"name": "Tyler", "score": 4},
  {"name": "Nick", "score": 4},
  {"name": "Patrick", "score": 3},
  {"name": "Jack", "score": 3},
  {"name": "Aboss", "score": 3},
  {"name": "Colin", "score": 1}, 
  {"name": "Sling", "score": 1},
  {"name": "Joe", "score": 2},
  {"name": "Terrrence", "score": 2},
  {"name": "Scott", "score": 4},
]

//loop to display players[] as checkboxes
const myDiv = document.getElementById("cboxes");

for (let i = 0; i < players.length; i++) {
    let checkBox = document.createElement("input");
    let label = document.createElement("label");
    
    checkBox.type = "checkbox";
    checkBox.value = players[i]['score'];
    checkBox.name = players[i]['name'];
    
    myDiv.appendChild(label);
    label.appendChild(checkBox);
    label.appendChild(document.createTextNode(players[i].name));
}

function checkCheckbox() {
  const checkedInputs = myDiv.querySelectorAll('input[type="checkbox"]:checked');
  
  playing = [];
  
  for (let i = 0; i < checkedInputs.length; i++) {
      if (i < 8) {
        playing.push({"name": checkedInputs[i].name, "score": checkedInputs[i].value});
      }
  }
  
  console.log(playing);
}

<div id="cboxes"></div>

<button onclick="checkCheckbox()">Push to playing array</button> <br>

如何将在 for 循环中选中的复选框中的数组值推送到另一个数组？

How can I push array values checked in checkboxes made from a for loop to another array?

html

javascript

arrays

checkbox

for-loop