Two-way binding with checkboxes always returns "on"

The "value" property on a checkbox is fixed, in the old days it was the value that was submitted along with the form only if the checkbox was checked.

The quick fix is this instead:

valueLink.requestChange(e.target.checked);

The valueLink only works when it is the value of the input that changes. Turns out that to link to the checked property, the checkedLink needs to be used instead:

render: function () {    return React.DOM.div(null, [        React.DOM.input({            type: 'checkbox',            checkedLink: this.linkState('value'),        }),        React.DOM.span(null, "state: " + this.state.value)    ]);}

Seems a shame that the valueLink can't be used for both!

One simple solution using state:

  constructor(props) { // list of objects    super(props);    this.state = {      is_checked: false    };  }  toggleCheckbox(event) {    let newValue = (this.state.is_checked === "on" || this.state.is_checked === true) ? false : true;    this.setState({      is_checked: newValue    });  }  render() {    return (      <div>        <input type="checkbox" checked={this.state.is_checked}          onChange={this.toggleCheckbox.bind(this)}        />      </div>    );  }