How to change value of all checkboxes in react?-CodePudding

I want to change value of my checkboxes from true to false

 var x = document.getElementsByClassName("checkbox")
      for(let i=0; i<=x.length; i  ) {
         x[i].checked = false;
       }

but when I try to do this I get an error: Cannot set properties of undefined (setting 'checked') because x is HTMLCollection and x[i] returns only
<input type="checkbox" class="checkbox"> so no 'checked' property.
How can I handle this?

CodePudding user response：

Please either change the <= to < in the for loop

for(let i=0; i<x.length; i  ) {}

Or make it to loop till length - 1

for(let i=0; i<=x.length - 1; i  ) {}

CodePudding user response：

Try this:

<input type="checkbox" checked={this.state.chkbox} onChange={this.handleChangeChk} />

Or you can check this question here briefly explained:

Set checkbox value in React JS

CodePudding user response：

The problem is in the for loop. The condition should be i<x.length only.

var x = document.getElementsByClassName("checkbox")
for (let i = 0; i < x.length; i  ) {
  x[i].checked = false;
}

// below for testing purpose
for (let i = 0; i < x.length; i  ) {
  console.log(x[i].checked)
}

<input type="checkbox" class="checkbox">

CodePudding user response：

It's best to use setState to manage the checkbox values - best to update the values here in the ShadowDOM as this part of what makes React is all about

Specific instructions on how to implement checkboxes and react can be found here -- http://react.tips/checkboxes-in-react-16/

CodePudding user response：

If this is code in an React application as you're suggesting you shouldn't be mixing native element methods and React JS like that as React has its own way of particular way of updating the DOM.

You should store the status of the checkboxes in state, set their checked status to that state, and then call a function to update the state causing a re-render with that new state.

const { useState } = React;

function Example() {

  const [ state, setState ] = useState(true);

  function handleClick() {
    setState(false);
  }

  return (
    <div>
      <input type="checkbox" checked={state} />
      <input type="checkbox" checked={state} />
      <input type="checkbox" checked={state} />
      <input type="checkbox" checked={state} />
      <button onClick={handleClick}>Uncheck the boxes!</button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

The issue with how you're doing it is that you're not making use of the states in React.

This is how I would do it.

Set initial state of the checkboxes:

constructor(props) {
    super(props);
    this.state = {checked : false};
    }

then pass the state into the checked property of the input:

<input type="checkbox" checked={this.state.checked} onChange={(e) => this.handleChange(e)} />

In the handleChange function update the state of the checkbox:

handleChange = (e) => {
    this.setState({ checked: e.target.checked })
  }

This should update all the checkboxes that have checked={this.state.checked}