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.
-
4
Recheck this line:
if (toggleButton.checked = true){
– Alon Eitan Commented Jun 5, 2020 at 14:24
8 Answers
Reset to default 2You'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
版权声明:本文标题:javascript - How to checkuncheck a checkbox in pure JS using an onclick event? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741926636a2405327.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论