desmarque la casilla de verificación programáticamente en reactjs

Solución:

Hay propiedad de casilla de verificación checked puede usar eso para alternar el estado de la casilla de verificación.

Maneras posibles:

1- Puedes usar ref con casillas de verificación, y onClick de botón, usando ref puede desmarcar la casilla.

2- Puede usar un elemento controlado, significa almacenar el estado de la casilla de verificación dentro de un state variable y actualícela cuando haga clic en el botón.

Mira este ejemplo por usando ref, asigne un único ref a cada casilla de verificación, luego pase el índice de ese elemento dentro de la función onClick, use ese índice para alternar específico checkBox:

class App extends React.Component{

   constructor(){
      super();
      this.state = {value: ''}
   }
   
   unCheck(i){
      let ref="ref_" + i;
      this.refs[ref].checked = !this.refs[ref].checked;
   }
   
   render(){
     return (
       <div>
        {[1,2,3,4,5].map((item,i) => {
           return (
              <div>
                 <input type="checkbox" checked={true} ref={'ref_' + i}/>
                 <button onClick={()=>this.unCheck(i)}>Toggle</button>
              </div>
            )
        })}      
       </div>
     )
   }

}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Mira este ejemplo de elemento controlado, significa almacenar el state de casilla de verificación en el interior state variable, y al hacer clic en el botón cambiar el valor de eso:

class App extends React.Component{

   constructor(){
      super();
      this.state = {value: []}
   }
   
   onChange(e, i){
      let value = this.state.value.slice();
      value[i] = e.target.checked;
      this.setState({value})
   }
       
   unCheck(i){
      let value = this.state.value.slice();
      value[i] = !value[i];
      this.setState({value})
   }
       
   render(){
     return (
        <div>
           {[1,2,3,4,5].map((item,i) => {
             return (
                <div>
                  <input checked={this.state.value[i]} type="checkbox" onChange={(e) => this.onChange(e, i)}/>
                  <button onClick={()=>this.unCheck(i)}>Toggle</button>
                </div>
              )
           })}      
         </div>
       )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Reaccionar

Comprobado

1. Usando el estado

    <input type="radio" name="count" value="minus" onChange={this.handleRadioChange} checked={this.state.operation == "minus"} /> Decrement

2.Uso de referencias

<input type="radio" name="count" ref="minus" /> Decrement
onSubmit(e){ this.refs.minus.checked = false }

Usando javascript simple, puede lograrlo como se muestra a continuación.

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

Pequeña DEMO

---

---

Utiliza Nuestro Buscador