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

nhn9ugyo  于 2023-04-04  发布在  Java
关注(0)|答案(6)|浏览(203)

我正在摆弄复选框,我想知道是否有一种方法可以通过调用一个函数来取消选中按钮上的复选框??如果有?我该怎么做?

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

我怎样才能取消勾选复选框编程,如果我有多个复选框动态生成使用Map函数。我怎样才能取消勾选他们,如果我想?

pgx2nnw8

pgx2nnw81#

有复选框checked的属性,您可以使用它来切换复选框的状态。
可能的方式:

1-ref可以带复选框,onClick可以带按钮,ref可以不勾选复选框。
**2-**您可以使用受控元素,即在state变量中存储复选框的状态,并在单击按钮时更新该状态。

通过using 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'/>

选中controlled element的示例,意味着将复选框的state存储在state变量中,并在单击按钮时更改其值:
一个二个一个一个

iezvtpos

iezvtpos2#

React

已检查

1.使用状态

<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 }
7gs2gvoe

7gs2gvoe3#

使用普通的javascript,你可以达到如下的效果。

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

Small DEMO

14ifxucb

14ifxucb4#

我在想这样一件事:

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

bakd9h0s5#

复选框有一个checked属性,你可以将它挂钩到状态并动态更改它。检查这些链接:
https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs
http://react.tips/checkboxes-in-react/

f8rj6qna

f8rj6qna6#

有时候使用简单的javascript是很好的。如果你在你的任何状态下都没有复选框值,那么试试这个

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

相关问题