DEV Community

elvisnguy
elvisnguy

Posted on

Checkbox Group ReactJS issue

I'm a newbie of ReactJS, I was mess around with this function. Here I'm got 3 group of checkbox so I wanna when I checked/unchecked 1st box (2nd,3rd) of group checkbox then it's same effected like this :https://www.loom.com/share/35506f4234a649a9b98213dd0430bf9e

I'm so grateful with every idea which community give me, tks you all

export const Vertical: ComponentStory<typeof EdsFormCheckbox> = () => {
  const [isChecked, setChecked] = useState({checkOne:false,checkTwo: false,checkThree: false});
  const handleClick = (e: ChangeEvent<HTMLInputElement>) => setChecked(isChecked.checkOne);
Enter fullscreen mode Exit fullscreen mode

return (


    onChange={handleClick}<br>
    name="standard"<br>
    labelText="Standard"<br>
    className="gap-300"<br>
  &gt;<br>
    <br>
    <br>
    <br>
Enter fullscreen mode Exit fullscreen mode
  <EdsCheckboxGroup
    onChange={handleClick}
    name="required"
    labelText="Required"
    className="gap-300"
  >
    <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isRequired></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isRequired></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkThree}  labelText="English" isRequired></EdsFormCheckbox>
  </EdsCheckboxGroup>

  <EdsCheckboxGroup
    onChange={handleClick}
    name="disable"
    labelText="Disable"
    className="gap-300"
  >
    <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isDisabled></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isDisabled></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkThree} labelText="English" isDisabled></EdsFormCheckbox>
  </EdsCheckboxGroup>

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More