[Bug] Input checkbox value returns "on" in Internet Explorer 11

Binding the value attribute of an input (checkbox) tag to a controller/component property seems broken in IE11.

See a minimal example here: https://cspanring.github.io/ie11-input-value/ (code)

template:

<input value={{inputValue}} type="checkbox" onclick={{action "getCheckboxValue"}}>My value is {{inputValue}}

controller:

inputValue: 3,

  actions: {
    getCheckboxValue() {
      let value = document.querySelector('input[type=checkbox]').value;
      // in IE11 value will be "on"
      alert('My value is: ' + value);
    },
  },

[jherdman]

Hey friends. I’ve worked around this in the past with radio buttons too (see #14712). The gist is that IE11 cares a lot about the order of your attributes. In general I’ve wrapped up native radio buttons in a component that has a didRender hook that looks like this:

  didRender() {
    // IE11 needs to have it value re-set
    this.element.value = this.value;
  },

[christianhaller3000]

I stumbled on a solution for this. In IE11, if you set the value then change it to a checkbox, it will erase the value. So:

oCheckBox=document.createElement('input');
oCheckBox.name='testcheckbox';
oCheckBox.value='123456789';
oCheckBox.type='checkbox';
alert(oCheckBox.value);

This will show the correct value in Chrome, but will say ‘on’ in IE11. The following will ensure correct behaviour in both browsers:

oCheckBox=document.createElement('input');
oCheckBox.name='testcheckbox';
oCheckBox.type='checkbox';
oCheckBox.value='123456789';
alert(oCheckBox.value);

To quote someone in a chatroom when answering a hairy IE question, “did you properly light the incense? In which order did you chant and throw the chicken bones?” Instances like this make this question less silly the more insanity you find.

Thank you so much @thirdwheel You saved my day!