如何在纯JS中使用onclick事件来checkuncheck一个复选框？

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

你有问题是因为你使用了一个赋值操作符。=，当一个比较运算符。== 是合适的，正如其他一些人所说。

因此，下面的修正后的javascript应该可以使用。

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

事实上，根本不需要使用... ... == true 或 == false 反正在javascript中。你可以把你的代码进一步简化成这样。

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" 因为你希望这两个标签都能切换复选框，所以'toggleButton.checked = true'是在设置值，而不是比较值，你需要做的是修改如下。

Answer 2

'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 3

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

你可以在 if 语句中删除比较。

if (toggleButton.checked) { ... }

或者用====代替

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

Answer 4

你可以尝试用'! '来反转布尔值(truefalse)。

toggleButton.check = !toggleButton.check

!toggleButton.check 是反向的 toggleButton.check

对你来说，它是这样的

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

Answer 5

使用 if(toggleButton.checked===true) 而不是 if(toggleButton.checked=true)

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

用你当前的javascript代码替换它，就可以工作了。

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

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

Answer 8

除了这个问题之外 toggleButton.checked = true 应是 toggleButton.checked === true (或只是 toggleButton.checked)一般来说，它是 不是个好主意 来使用内联事件处理程序。尝试在文档中添加事件处理，并使用 活动代表团. 类似（函数简化）。

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>