如何使用 onclick 事件 check/uncheck 纯 JS 中的复选框？

Question

这是我的代码：

function toggleOffer() {
    let toggleButton = document.getElementById("select-time");
    if (toggleButton.checked = true){
        toggleButton.checked= false;
    }else{
        toggleButton.checked= true;
    }
}

<div>
   <p onclick="toggleOffer()">1 mois</p>
   <input type="checkbox" id="select-time" checked>
   <p onclick="toggleOffer()">12 mois</p>
</div>

它以一种方式工作：当我的复选框被选中并且我点击任一 <p> 时，该复选框被取消选中，但我无法以另一种方式工作。

Answer 1

'toggleButton.checked = true'是设置值而不是比较值，你需要做的是把它改成下面这样 if(toggleButton.checked === true){... 或者因为它是有问题的布尔值，只需简单地执行此操作 if(toggleButton.checked){...

我什至建议更简洁的方法是这样做。而不是这个

if (toggleButton.checked === true){
    toggleButton.checked= false;
}else{
    toggleButton.checked= true;
}

就这样做toggleButton.checked = !toggleButton.checked

Answer 2

您在 if 语句中设置了 checked 的值，而不是检查它。

您可以删除 if 语句中的比较：

if (toggleButton.checked) { ... }

或者使用==/===代替：

if (toggleButton.checked === true) { ... }

Answer 3

您遇到问题是因为您使用的是赋值运算符 =，而比较运算符 == 是合适的，正如其他一些人所说。

以下经过更正的 javascript 因此应该有效：

function toggleOffer() {
  let toggleButton = document.getElementById("select-time");
  if (toggleButton.checked == true) {
    toggleButton.checked = false;
  } else {
    toggleButton.checked = true;
  }
}

实际上，无论如何都没有必要在 javascript 中使用 == true 或 == false。您可以进一步简化您的代码：

function toggleOffer() {
  let toggleButton = document.getElementById("select-time");
  if (toggleButton.checked) {
    toggleButton.checked = false;
  } else {
    toggleButton.checked = true;
  }
}

或者，由于 .checked 属性在 javascript 中的工作方式：

function toggleOffer() {
  toggleButton.checked = !toggleButton.checked;
}

这总是将复选框设置为相反的布尔值，这与切换它相同。

但我还想补充一点，您可以在不使用 javascript 使用 label 元素的情况下完全实现此行为。

这是我的首选方式：

<div>
   <label for="select-time">1 mois</label>
   <input type="checkbox" id="select-time" checked>
   <label for="select-time">12 mois</label>
</div>

将您的 p 元素更改为 label，并添加一个 for 属性，指定要切换的复选框的 id。

在您的情况下，for="select-time" 用于两个标签，因为您希望两个标签都切换复选框。

Answer 4

使用if(toggleButton.checked===true)代替if(toggleButton.checked=true)

Answer 5

您可以尝试使用“!”反转布尔值 (true/false)

toggleButton.check = !toggleButton.check

!toggleButton.check 与 toggleButton.check

相反

对你来说是这样的

function toggleOffer() {
    let toggleButton = document.getElementById("select-time");
    toggleButton.check = !toggleButton.check
}

Answer 6

function toggleOffer() {
        let toggleButton = document.getElementById("select-time");
        if(!toggleButton) return;
        toggleButton.checked = !toggleButton.checked;
    }

或者一次性

<p onclick="((el)=>{el.checked = !el.checked})(document.getElementById('select-time') || {})">12 mois</p>

Answer 7

除了 toggleButton.checked = true 应该是 toggleButton.checked === true（或者只是 toggleButton.checked）的问题之外，通常是 not a good idea to use inline event handlers. Try adding event handling to the document, and using event delegation。类似（功能简化）：

document.addEventListener("click", toggleOffer);

function toggleOffer(evt) {
  if (evt.target.dataset.offer) {
    const checkBox = document.querySelector("#select-time");
    checkBox.checked = !checkBox.checked;
  }
}

p[data-offer] {
  cursor: pointer;
}

<p data-offer="0">1 mois</p>
<input type="checkbox" id="select-time" checked>
<p data-offer="1">12 mois</p>

Answer 8

将其替换为您当前的 javascript 代码即可：

const toggleButton = document.getElementById("select-time");

function toggleOffer() {
  if (toggleButton.checked == true){
    toggleButton.checked= false;
  } else {
    toggleButton.checked= true;
  }
}

如何使用 onclick 事件 check/uncheck 纯 JS 中的复选框？

How to check/uncheck a checkbox in pure JS using an onclick event?

javascript

checkbox

checked