title: How to limit the number of selected check-boxes in React JS?
body: <p>I want to limit the maximum number of checked check-boxes to be 3. At the same time I also want to create an array of the selected values. Please note that, I am using <a href="https://ant.design/components/checkbox/" rel="nofollow noreferrer">Ant design's checkbox</a>. Code is as given in <a href="https://codesandbox.io/s/185l1l6nl4" rel="nofollow noreferrer">codesandbox.io</a>.</p>
  
  <pre><code>handleCheckbox = (e) =&gt; {
      let qlen = document.querySelectorAll('input[type="checkbox"]:checked').length;
      if(qlen &lt; 3) {
      if(e.target.checked) {
        this.setState({
          indstryValue: this.state.indstryValue.concat([e.target.value])
        });
      } else {
        var arr = this.state.indstryValue;
        arr = arr.filter(item =&gt; item !== e.target.value);
        this.setState({
          indstryValue: arr
        });
      }
    }
  
    var checks = document.querySelectorAll('input[type="checkbox"]');
    var max = 2;
    for (var i = 0; i &lt; checks.length; i++)
      checks[i].onclick = selectiveCheck;
    function selectiveCheck(event) {
      console.log(event.target);
      var checkedChecks = document.querySelectorAll('input[type="checkbox"]:checked');
      if (checkedChecks.length &gt;= max + 1)
        return false;
    }
  }
  </code></pre>