dimanche 2 décembre 2018

Returning false from checkbox's onclick function

I want to take manual control over whether a given input type='checkbox' is checked. For this reason I provide a custom onclick function and return false from it: my thinking is if I don't return false, then the default action (revert the input's checked flag) will override what I was setting in my custom function.

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    input.checked = false
  else
    input.checked = true
  
  return false
}
<input type="checkbox"/>

However, this doesn't work. return false reverts what I done! It resets the checkbox to the state it was in before clicking it!

Removing return false is no good either: Then the checkbox forces itself to the state it wasn't in before clicking it, again overriding whatever I do in my custom onclick function:

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    input.checked = true // click should be futile
  else
    input.checked = false //click should be futile
}
<input type="checkbox"/>

How can I take manual control over whether the checkbox is clicked or not? How can I make the checkbox not override whatever I set in my custom onclick handler?




Aucun commentaire:

Enregistrer un commentaire