<div id="root"></div>
section {
  display: flex;
  flex-direction: column ;
  justify-content: center;
  align-items:  start;
  min-height: 100vh;
}

label {
  font-size: 1.5rem;
}

input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: .5rem
}

#selectAll {
  margin-bottom: 1rem;
}
View Compiled
const { useState, useEffect } = window.React;

const App = () => {
  
  const [allCheck, setAllCheck] = useState(false);
  const [redCheck, setRedCheck] = useState(false);
  const [greenCheck, setGreenCheck] = useState(false);
  const [blueCheck, setBlueCheck] = useState(false);
  
  useEffect(() => {
    if(redCheck && greenCheck && blueCheck) {
      setAllCheck(true);
    } else {
      setAllCheck(false);
    }
  }, [redCheck, greenCheck, blueCheck])
  
  return <section>
      <label htmlFor="all" id="selectAll"> 
        <input type="checkbox" id="all" name="all" 
          checked={allCheck}
          onClick={(e) => {
            if(e.target.checked) {
              setAllCheck(true);
              setRedCheck(true);
              setGreenCheck(true);
              setBlueCheck(true);
            } else {
              setAllCheck(false);
              setRedCheck(false);
              setGreenCheck(false);
              setBlueCheck(false);
            }
          }}/>
        Select All
      </label>
      
      <label htmlFor="red">
        <input type="checkbox" id="red" name="red" 
          checked={redCheck}
          onClick={(e) => {
            if(e.target.checked) {
              setRedCheck(true);
            } else {
              setRedCheck(false);           
            }
          }}/>
        Red
      </label>
      
      <label htmlFor="green">
        <input type="checkbox" id="green" name="green"
          checked={greenCheck}
          onClick={(e) => {
            if(e.target.checked) {
              setGreenCheck(true);
            } else {
              setGreenCheck(false);    
            }
          }}/>
        Green
      </label>
      
      <label htmlFor="blue">
        <input type="checkbox" id="blue" name="blue"
          checked={blueCheck}
          onClick={(e) => {
            if(e.target.checked) {
              setBlueCheck(true);
            } else {
              setBlueCheck(false);      
            }
          }}/>
        Blue
      </label>
  </section>;
}

ReactDOM.render(
    <App />, 
    document.getElementById('root')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js