javascript - How to checkuncheck a checkbox in pure JS using an onclick event? - Stack Overflow

admin管理员组

文章数量:1313179

Here is my code:

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>

Here is my code:

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>

It works one way: when my checkbox is checked and I click on either <p>, the checkbox gets unchecked, but I can't get the other way round to work.

• javascript
• checkbox
• checked

Share Improve this question Follow edited Jun 5, 2020 at 16:30 cyborg86pl 2,61733 gold badges2727 silver badges4343 bronze badges asked Jun 5, 2020 at 14:23 MarionMarion 3511 gold badge22 silver badges66 bronze badges 1

• 4 Recheck this line: if (toggleButton.checked = true){ – Alon Eitan Commented Jun 5, 2020 at 14:24

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

You're having a problem because you're using an assignment operator, =, when a parison operator, == is appropriate, as a few others have said.

The following, corrected javascript should therefore work:

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

Actually, there's no need to ever use == true or == false in javascript anyway. You could simplify your code further to this:

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

Or, because of the way that the .checked property works in javascript:

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

This always sets the checkbox to the opposite boolean value, which is the same as toggling it.

---

But I would also like to add that you could achieve this behaviour pletely without javascript using label elements.

This would be my preferred way to do this:

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

Change your p element to label, and add a for attribute specifying the id of the checkbox they are meant to toggle.

In your case, for="select-time" for both labels, because you want both labels to toggle the checkbox.

'toggleButton.checked = true' is setting the value rather than paring it, what you need to do is change it to the following if(toggleButton.checked === true){... or since it is boolean value in question just simply do this if(toggleButton.checked){...

I would even propose the cleaner way is to do it like this. Instead of this

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

just do this toggleButton.checked = !toggleButton.checked

Your'e setting the value of checked inside the if statement instead of checking for it.

You can remove the parison inside the if statement:

if (toggleButton.checked) { ... }

Or use ==/=== instead:

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

you can try to reverse boolean (true/false) with '!'

toggleButton.check = !toggleButton.check

!toggleButton.check is the reverse of toggleButton.check

for you it's something like this

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

use if(toggleButton.checked===true) instead of if(toggleButton.checked=true)

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

Or in one go

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

Replace this with your current javascript code and it'll work:

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

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

Beside the problem that toggleButton.checked = true should be toggleButton.checked === true (or just toggleButton.checked) it is generally not a good idea to use inline event handlers. Try adding event handling to the document, and using event delegation. Something like (function simplified):

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>

本文标签： javascriptHow to checkuncheck a checkbox in pure JS using an onclick eventStack Overflow