仅在未选中复选框的情况下如何执行功能？

我正在研究一个小骰子游戏，用户可以在其中锁定特定骰子。但是我不能让它与if else语句一起使用。如何仅在未选中复选框的地方“掷骰子”？

const btnRoll = document.querySelector('.btn_roll');

btnRoll.addEventListener('click',() => {
  roll();
});

function roll() {
  const dice1 = document.querySelector('.dice1');
  const dice2 = document.querySelector('.dice2');
  const dice3 = document.querySelector('.dice3');

  if (!document.getElementById('dice-1').checked) {
    randomOne = Math.floor(Math.random() * 6) + 1;
    dice1.src = `img/dice-${randomOne}.png`;
    console.log(!document.getElementById('dice-1').checked);
  } else if (!document.getElementById('dice-2').checked) {
    randomTwo = Math.floor(Math.random() * 6) + 1;
    dice2.src = `img/dice-${randomTwo}.png`;
  } else if (!document.getElementById('dice-3').checked) {
    randomThree = Math.floor(Math.random() * 6) + 1;
    dice3.src = `img/dice-${randomThree}.png`;
  } else {
    console.log('no checkboxes are selected');
  }
}

<form id="dices">
  <input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
  <img src="img/dice-5.png" alt="Dice" class="dice1" id="dice-1" />
  <input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
  <img src="img/dice-5.png" alt="Dice" class="dice2" id="dice-2" />
  <input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
  <img src="img/dice-5.png" alt="Dice" class="dice3" id="dice-3" />
  <input type="checkbox" id="dice-4" name="dice-4" value="dice-4" /> 5.png" alt="Dice" class="dice6" id="dice-6" />
</form>
<br />
<button class="btn_roll">roll</button>

您正在使用“ else-if”语句，当其中一个语句运行时，它会有效地缩短您的逻辑。仅将“ else-if”替换为“ if”：s。

（我将最后一个“ else”语句替换为“ if”语句，这是其他if语句的取反，因为我们在这里不能做其他操作。）


function roll() {
  const dice1 = document.querySelector('.dice1');
  const dice2 = document.querySelector('.dice2');
  const dice3 = document.querySelector('.dice3');

  const firstDiceChecked = document.getElementById('dice-1').checked
  const secondDiceChecked = document.getElementById('dice-2').checked
  const thirdDiceChecked = document.getElementById('dice-3').checked

  if (!firstDiceChecked) {
    randomOne = Math.floor(Math.random() * 6) + 1;
    dice1.src = `img/dice-${randomOne}.png`;
    console.log(!document.getElementById('dice-1').checked);
  }
  if (!secondDiceChecked) {
    randomTwo = Math.floor(Math.random() * 6) + 1;
    dice2.src = `img/dice-${randomTwo}.png`;
  }
  if (!thirdDiceChecked) {
    randomThree = Math.floor(Math.random() * 6) + 1;
    dice3.src = `img/dice-${randomThree}.png`;
  } 
  if (!firstDiceChecked && !secondDiceChecked && !thirdDiceChecked) {
    console.log('no checkboxes are selected');
  }
}

const checkboxes = [
document.getElementById("dice-1")
document.getElementById("dice-2")
document.getElementById("dice-3")
document.getElementById("dice-4")
document.getElementById("dice-5")
];

let allChecked = true;
for (const checkbox of checkboxes) {
if (!checkbox.checked) allChecked = false;
}

if (allChecked) {
roll();
}

我将div与背景图像一起使用，而不是交换实际图像对象的src。

您可以通过循环并以复选框的父级为目标来获取模具图像来简化此操作。

document.querySelector('.btn-roll').addEventListener('click',rollDice);

function rollDice(e) {
  let checked = document.querySelectorAll('#dice .die-wrapper input:checked');
  Array.from(checked).forEach(cb => {
    let die = cb.parentElement.querySelector('.die');
    let roll = getRandomIntInclusive(1,6);
    die.className = 'die die-' + roll;
    die.setAttribute('data-roll',roll);
  });
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive
function getRandomIntInclusive(min,max) {
  if (arguments.length === 1) { max = min; min = 0; }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

.die-wrapper {
  display: inline-block;
}

.die {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
}

.die-1 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=1'); }
.die-2 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=2'); }
.die-3 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=3'); }
.die-4 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=4'); }
.die-5 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=5'); }
.die-6 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=6'); }

<form id="dice">
  <div class="die-wrapper">
    <input type="checkbox" name="die-1" value="dice-1" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-2" value="dice-2" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-3" value="dice-3" />
    <div class="die die-1"></div>
  </div>
</form>
<br />
<button class="btn-roll">Roll</button>

使用Unicode字形来显示模具面...

document.querySelector('.btn-roll').addEventListener('click',max) {
  if (arguments.length === 1) {
    max = min;
    min = 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

.die-wrapper {
  display: inline-block;
}

.die {
  display: inline-block;
  height: 2em;
}

.die::after {
  font-size: 3em;
  line-height: 0.75em;
}

.die-1::after { content: '\2680'; }
.die-2::after { content: '\2681'; }
.die-3::after { content: '\2682'; }
.die-4::after { content: '\2683'; }
.die-5::after { content: '\2684'; }
.die-6::after { content: '\2685'; }

<form id="dice">
  <div class="die-wrapper">
    <input type="checkbox" name="die-1" value="dice-1" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-2" value="dice-2" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-3" value="dice-3" />
    <div class="die die-1"></div>
  </div>
</form>
<br />
<button class="btn-roll">Roll</button>

仅在未选中复选框的情况下如何执行功能？

lilywang2009 回答：仅在未选中复选框的情况下如何执行功能？

大家都在问