Menu
How to make the radio button checked if the initial value is true?
394
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
To check/uncheck a radio button in React, we use the checked property of the input elements, which is set to true when the radio button is checked otherwise it is set to false .
If a radio button is checked, its checked property is true .
This can be done using ".getElementById. And the output will be shown in a Boolean value. After clicking "Tap to check" button, it will show whether the radio button is by default clicked or not.
Using the defaultChecked property, available for <input type="checkbox"> and <input type="radio"> - https://reactjs.org/docs/uncontrolled-components.html#default-values
<input type="radio" name="radio-group" value="1" defaultChecked /> <input type="radio" name="radio-group" value="2" /> <input type="radio" name="radio-group" value="3" /> Sometimes the issue can be fixed by removing the name attribute and instead using a conditional checked value:
<li> <label> <input type="radio" value="medium" checked={this.state.size === "medium"} onChange={this.handleChange} /> Medium </label> </li> <li> <label> <input type="radio" value="large" checked={this.state.size === "large"} onChange={this.handleChange} /> Large </label> </li> Source Here: https://magnusbenoni.com/radio-buttons-react/
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
