uncheck checkbox programmatically in reactjs
There is property of checkbox checked
you can use that to toggle the status of check box.
Possible Ways:
1- You can use ref
with check boxes, and onClick
of button, by using ref
you can unCheck the box.
2- You can use controlled element, means store the status of check box inside a state
variable and update that when button clicked.
Check this example by using ref, assign a unique ref
to each check box then pass the index of that item inside onClick function, use that index to toggle specific checkBox
:
Check this example of controlled element, means storing the state
of checkbox inside state
variable, and on click of button change the value of that:
React
Checked
- Using State
<input type="radio" name="count" value="minus" onChange={this.handleRadioChange} checked={this.state.operation == "minus"} /> Decrement
2.Using Refs
<input type="radio" name="count" ref="minus" /> DecrementonSubmit(e){ this.refs.minus.checked = false }
Using plain javascript you can acheive like below.
function unCheck() { var x = document.getElementsByClassName("checkbox"); for(i=0; i<=x.length; i++) { x[i].checked = false; } }