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

我搞乱了复选框，我想知道有没有一种方法可以通过调用函数，在点击按钮时取消选中复选框？？若有?？我该怎么做

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

this.unCheck（）}

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

---

如果需要，如何取消选中它们？

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

---

使用纯javascript，您可以实现如下效果

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

函数取消选中（）{
var x=document.getElementsByClassName（“复选框”）；
对于（i=0；i有checkbox
checked
属性，您可以使用该属性切换复选框的状态

可能的方式：

1-您可以使用带有复选框的
ref
，然后单击按钮的
onClick
，使用
ref
您可以取消选中该框

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

通过使用ref选中此示例，为每个复选框指定唯一的
ref
，然后在onClick函数中传递该项的索引，使用该索引切换特定的
复选框
：


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={value:''}
}
取消选中（i）{
设ref='ref_'+i；
this.refs[ref]。选中=！this.refs[ref]。选中；
}
render（）{
返回(
{[1,2,3,4,5].map（（项，i）=>{
返回(
这个。取消选中（i）}>Toggle
)
})}      
)
}
}
ReactDOM.render（，document.getElementById（'app'））
我在想这样一件事：

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

this.onFilterChange（input）}className=“表单检查输入”type=“checkbox”/
onFilterChange=（输入）=>{let{value，checked}=input.target；}
unkeckall=（）=>{
[…document.querySelectorAll（'.form check input'）].map（（input）=>{
如果（输入。选中）{
让fakeInput={
目标：{
value:input.value，
勾选：假
}
}
input.checked=！input.checked；
这个。onFilterChange（fakeInput）；
}
返回null；
})
}

反应

已选中

使用状态
减量
有时使用纯javascript是很好的。如果您在任何状态下都有复选框值，请尝试以下方法

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

$（'.checkbox'）.prop（'checked'，false）；@suresponnukalai我在任何地方都没有使用jquery..没有jquery我怎么做？使用普通javascript:document.getElementsByClassName（“checkbox”）。您将获得一个对象数组，然后用checked=false分配每个对象。我已经创建了fiddle，并在下面给出了您的refHey mayank。非常好的解释：）像往常一样你摇滚；）谢谢，检查另一个片段，如何使用受控复选框元素，如果您有其他帮助，请告诉我：）嗨@MayankShukla，当我尝试
this.refs.[some\u ref\u name]
时，它返回一个
HTMLInputElement
而不是一个对象，因此我无法设置任何
选中的
字段，您知道如何修复此问题吗？@TriNguyen ref将仅返回html元素，然后我们可以更改元素的checked属性。检查/运行第一个代码段，您将获得更好的想法。