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

Posted 2023-03-05

【中文标题】在 reactjs 中以编程方式取消选中复选框

【英文标题】：uncheck checkbox programmatically in reactjs

【发布时间】：2017-09-21 23:53:19

【问题描述】：

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

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

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

【问题讨论】：

$('.checkbox').prop('checked', false);

@SureshPonnukalai 我没有在任何地方使用 jquery .. 没有 jquery 怎么办？

使用纯 javascript：document.getElementsByClassName("checkbox")。您将获得对象数组，然后为每个对象分配checked=false

我已经创建了小提琴，并在下面为您提供参考

【参考方案1】：

复选框checked有一个属性，你可以用它来切换复选框的状态。

可能的方法：

1-ref可以用复选框，onClick可以用按钮，ref可以取消勾选。

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

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

查看受控元素的示例，表示将复选框的state 存储在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'/>

【讨论】：

嘿马扬克。很好的解释 :) 一如既往的摇滚 ;)

谢谢，查看另一个 sn-p，如何使用受控复选框元素，如果您有任何其他帮助，请告诉我 :)

嗨@MayankShukla，当我尝试this.refs.[some_ref_name] 时，它返回一个htmlInputElement 而不是一个对象，所以我无法设置任何checked 字段，你知道如何解决这个问题吗？跨度>

@TriNguyen ref 将只返回 html 元素，然后我们可以更改元素的 checked 属性。检查/运行第一个 sn-p 你会得到一个更好的主意。

【参考方案2】：

反应

已检查

使用状态

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

2.使用参考

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

【参考方案3】：

使用纯 javascript，您可以实现如下所示。

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

Small DEMO

【参考方案4】：

我在想这样的事情：

<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;
    )

【参考方案5】：

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

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

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

【参考方案6】：

有时使用纯 javascript 会很好。如果您在任何状态下都有复选框值，那么试试这个

 let checkboxValue = xyz
 document.querySelectorAll("input[value="+checkboxValue+"]")[0].checked = false;