React multiple checkbox with one check at a time

user_11923680 0
Viewed 277

Hello I have question about how I can make user select one checkbox at a time. So for example, if there is three checkbox(none are selected when page loads) on react component and user select one checkbox, the other checkbox will not be checked unless user uncheck it. I am trying to use useref to make it to work... but seems like it is not working..

const refCheckBoxOne = useRef(null);
const refCheckBoxTwo = useRef(null);
const refCheckBoxThree = useRef(null);

const onchangefunction = (propertyname, value) => {

if(refcheckBoxOne.current.check){
refcheckBoxOne.current.check = false;
refcheckBoxOne.current.check = false;
}

}

<input id="one" ref={refCheckBoxOne} userefonchange={(e) => onchangefunction("checkboxOne",e.target.value) }/>
<input id="two" ref={refCheckBoxTwo} onchange={(e) => onchangefunction("checkboxTwo",e.target.value) }/>
<input id="three" ref={refCheckBoxThree} onchange={(e) => onchangefunction("checkboxThree",e.target.value) }/>

I have tried many ways to do it... but cant get it to work. I would be really appreciated if anyone can give me an idea on how to approach this kind of issue.

Thank you

use-ref reactjs checkbox html javascript
1 Answers

If two items you can use this

const App = () => {
  const [checked, setChecked] = React.useState(false);
  const handleChange = () => {
    setChecked(!checked);
  };
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
      </label>
    </div>
  );
};

If multiple value then use it

export default function App() {
  const [checkedState, setCheckedState] = useState(
    [false,false,false]
  );


  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
     index === position ? !item : item
   );

   setCheckedState(updatedCheckedState);
};

return (
 <div className="App">
  <h3>Select Toppings</h3>
  <ul className="toppings-list">
        <li key=0>
          <div className="toppings-list-item">
            <div className="left-section">
              <input
                type="checkbox"
                id=`custom-checkbox-1`
                checked={checkedState[0]}
                onChange={() => handleOnChange(0)}
              />
            </div>
          </div>
        </li>
        <li key=1>
          <div className="toppings-list-item">
            <div className="left-section">
              <input
                type="checkbox"
                id=`custom-checkbox-1`
                checked={checkedState[1]}
                onChange={() => handleOnChange(1)}
              />
            </div>
          </div>
        </li>
        <li key=2>
          <div className="toppings-list-item">
            <div className="left-section">
              <input
                type="checkbox"
                id=`custom-checkbox-2`
                checked={checkedState[2]}
                onChange={() => handleOnChange(2)}
              />
            </div>
          </div>
        </li>
   </ul>
 </div>

If you have any question , Comment below here .

user_122760800
Related