Javascript 在reactjs中以编程方式取消选中复选框

uncheck checkbox programmatically in reactjs

提问by Saif Ali Khan

I am messing with checkboxes and I want to know that is there a way in which I can uncheck a checkbox on click of a button by calling a function?? If so? How can I do that?

我弄乱了复选框，我想知道有没有一种方法可以通过调用函数来取消选中一个按钮时的复选框？如果是这样的话？我怎样才能做到这一点？

<input type="checkbox" className="checkbox"/>
<button onClick={()=>this.unCheck()}

How can I uncheck the checkbox programmatically and what if I have multiple checkboxes generated dynamically using map function. How can I uncheck them If I want to?

如何以编程方式取消选中该复选框，以及如果我使用 map 函数动态生成了多个复选框，该怎么办。如果我愿意，如何取消选中它们？

回答by Mayank Shukla

There is property of checkbox checkedyou can use that to toggle the status of check box.

有复选框的属性，checked您可以使用它来切换复选框的状态。

Possible Ways:

可能的方法：

1-You can use refwith check boxes, and onClickof button, by using refyou can unCheck the box.

1-您可以使用ref复选框和onClick按钮，通过使用ref您可以取消选中该框。

2-You can use controlled element, means store the status of check box inside a statevariable and update that when button clicked.

2-您可以使用受控元素，这意味着将复选框的状态存储在state变量中并在单击按钮时更新该状态。

Check this example by using ref, assign a unique refto each check box then pass the index of that item inside onClick function, use that index to toggle specific checkBox:

使用 ref检查此示例，ref为每个复选框分配一个唯一值，然后在 onClick 函数中传递该项目的索引，使用该索引切换特定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'/>

Check this example of controlled element, means storing the stateof checkbox inside statevariable, and on click of button change the value of that:

检查受控元素的这个示例，意味着将state复选框的of存储在state变量中，然后单击按钮更改其值：

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'/>

回答by K23raj

React

反应

Checked

已检查

1. Using State

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

1. 使用状态

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

2.Using Refs

2.使用参考

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

回答by Suresh Ponnukalai

Using plain javascript you can acheive like below.

使用普通的 javascript 你可以实现如下。

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

Small DEMO

小DEMO

回答by Gary Felicite-Prudent

I was thinking of a thing like that:

我在想这样的事情：

<input onChange={(input) => this.onFilterChange(input)} className="form-check-input" type="checkbox" />

onFilterChange = (input) => { let { value, checked } = input.target;}

unCkeckAll = () => {
    [...document.querySelectorAll('.form-check-input')].map((input) => {
        if (input.checked) {
            let fakeInput = {
                target: {
                    value: input.value,
                    checked: false
                }
            }
            input.checked = !input.checked;
            this.onFilterChange(fakeInput);
        }
        return null;
    })
}

回答by Mo Ismat

Checkboxes have a checked property, you can hook it to the state and change it dynamically. Check these links:

复选框有一个已选中的属性，您可以将其挂钩到状态并动态更改它。检查这些链接：

https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs

https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs

http://react.tips/checkboxes-in-react/

http://react.tips/checkboxes-in-react/