Is this the proper way to use a checkbox?

Question

Is this the proper way to use a checkbox in JS. I can only get the event to fire one time, not each time I click the box.

    var checkbox = document.checkbox;
    checkbox.addEventListener('change', function(){
    switch(this.value){

    case "on":
    checkbox.value = "off"; break;
    case "off":
    checkbox.value = "on"; break;
    }

    <input type="checkbox" name = "checkbox" checked = "checked" value = "on">

I don't understand what you are trying to do. Are you trying to do "listen" when the value changes (when the box is ticked)? — Swetank Poddar, Dec 31 '19 at 22:19
Also, the reason why it doesn't work after the first time is because the checkbox's value is never "off" and the query selector looks weird too. — Swetank Poddar, Dec 31 '19 at 22:20
Not sure if you are getting the reference to the checkbox correctly. Try `var checkbox = document.querySelector("input[name='checkbox']")` — Ben, Dec 31 '19 at 22:20
`document.checkbox` won't work. If it's in a form and the form has a name you can do `document.formName.nameInForm`. But, I'm not recommending using a form. — StackSlave, Dec 31 '19 at 22:22
@SwetankPoddar in case "on" I set the checkbox value = "off". Are you sure its never off? — Philip Yeranosian, Dec 31 '19 at 22:26
I think you are getting confused by how checkboxes work. If the checkbox is "checked" then it submits a value of "on" otherwise it doesn't submit/pass anything. — Swetank Poddar, Dec 31 '19 at 22:27
YourInputVar.checked returns either true or false by design. — Jason Y, Dec 31 '19 at 22:31
@PhilipYeranosian If you want to set the value as "off" if it is not checked, then simply check if its checked and if its not set the value for that parameter as "off". And no you cannot use it as a radio button. There's a reason why radio and checkboxes exists! :D — Swetank Poddar, Dec 31 '19 at 22:33

Jason Y · Answer 1 · 2019-12-31T22:33:48.687

1

You don't want spaces around your equals sign in HTML. Also, a switch statement is a little verbose for when you have less than three conditions.

Not sure what you are trying to accomplish exactly, but here you go.

var checkbox = document.querySelector('.checkbox');
checkbox.addEventListener('change', function(){
   this.checked ? this.setAttribute('value', 'on') : this.setAttribute('value', 'off');
});

<input class="checkbox" type="checkbox" name="checkbox" />

edited Dec 31 '19 at 22:33

answered Dec 31 '19 at 22:28

Jason Y

831
5
10

1

Spaces around `=` are perfectly fine in HTML. – Pointy Dec 31 '19 at 22:32
it's a poor practice (not well formed) and linters will complain in many cases. – Jason Y Dec 31 '19 at 22:33
1

[Spaces are explicitly allowed in the HTML5 spec.](https://www.w3.org/TR/2012/WD-html-markup-20120329/syntax.html#syntax-attr-unquoted) Linters can say what they want but it's perfectly fine to surround the `=` with spaces. – Pointy Dec 31 '19 at 22:38
@RyanW. Spaces in HTML do not make the document not well-formed. – Scott Marcus Dec 31 '19 at 22:43
Are you referring to semantic structure? If so, you can have poorly formed DOM structures with errors that is semantically correct. – Jason Y Dec 31 '19 at 22:47
I'm not sure you are aware of the meaning of "well-formed" when referring to a markup language. Semantics have nothing to do with it. Spaces do not impact whether the markup is well-formed or not. Their use is simply a matter of preference, on which people (and linters) can disagree, but that doesn't change the fact that it's perfectly acceptable code. – Scott Marcus Jan 02 '20 at 12:29
Technically, you're correct. I meant it's a matter of style and readability. Spaces around the "=" make it difficult to quickly identify the kay/value pairs of the attributes and their values. – Jason Y Jan 04 '20 at 03:47

Scott Marcus · Answer 2 · 2019-12-31T22:45:58.443

Make sure to get a reference to the checkbox using the proper API:

// Get a reference to the element the proper way:
var checkbox = document.querySelector("input[type='checkbox']");


checkbox.addEventListener('change', function(){
  switch(this.value){
    case "on":
      this.value = "off"; 
      break;
    case "off":
      this.value = "on"; 
      break;
  }
  
  console.log(this.value)
});

<input type="checkbox" name = "checkbox" checked = "checked" value = "on">

With that said, it's not super useful to change the value of a checkbox because it's checked. The usual way a checkbox is used is either to submit its value as part of a form submission or to use as a Boolean indicator of some state for "in-page" behavior. You generally don't want or need to change the value of a checkbox, instead you simply want to know if it is checked, which can be done by looking at its .checked property and making decisions based on that. A checkbox will have a checked property value of true when it's been checked and false when it isn't.

// Get a reference to the element the proper way:
var checkbox = document.querySelector("input[type='checkbox']");

checkbox.addEventListener('change', function(){
  if(this.checked){
    console.log("Checkbox is checked! Do something about it!");
  } else {
    console.log("Forget it. Checkbox wasn't checked.");
  }
});

<input type="checkbox" name = "checkbox" value = "on">

But if the checkbox isn't "checked" then its not really going to submit anything, right? — Swetank Poddar, Dec 31 '19 at 22:34
@SwetankPoddar Checkboxes (or any other form field) don't have to be used in conjunction with `form` elements and `form` submissions. They can be used for "in-page" behavior. While I don't advocate changing their `value`, it's not wrong to do. — Scott Marcus, Dec 31 '19 at 22:36

score 0 · Answer 3 · answered Dec 31 '19 at 23:09

No need of JS for this:

#chkBx + label { display:none; }
#chkBx:checked + label { display:inline; }
#chkBx:checked + label + label { display:none; }

<input type="checkbox" id="chkBx" checked ><label for="chkBx">On</label><label for="chkBx">Off</label>

Is this the proper way to use a checkbox?

3 Answers3