javascript 我需要将此选择转换为复选框

rta7y2nd 于 2022-12-02 发布在 Java

关注(0)|答案(1)|浏览(92)

我挣扎whit这一点，我必须改变一个选择形式的复选框形式我可以使视觉效果的变化，但复选框不像选择工作
这是选择

<div className="form-group">
<label forhtml="road-typeControlSelect">Flags</label>
<select name="flags" value={flags}  onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
    <option value={0}>All</option>
    <option value={1}>Tunnel</option>
    <option value={16}>Unpaved</option>
    <option value={32}>Headlights required</option>
    <option value={128}>Next to carpool/HOV/bus lane</option>
</select>

这是我到目前为止所做的与复选框

<div name="flags" value={flags}  onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
                        <label forhtml="road-typeControlSelect">Flags</label>
                        <div className="form-group form-check">
                            <input value={0} type="checkbox" name="All"  onChange={this.handleInputChange} className="form-check-input" />
                            <label className="form-check-label">All</label>
                        </div>  
                        <div className="form-group form-check">
                            <input value={1} type="checkbox" name="Tunnel" onChange={this.handleInputChange} className="form-check-input"/>
                            <label className="form-check-label">Tunnel</label>
                        </div>
                        <div className="form-group form-check">
                            <input value={16} type="checkbox" name="Unpaved"  onChange={this.handleInputChange} className="form-check-input" />
                            <label className="form-check-label">Unpaved</label>
                        </div>
                        <div className="form-group form-check">
                            <input value={32} type="checkbox" name="Headlights required"   onChange={this.handleInputChange} className="form-check-input"/>
                            <label className="form-check-label">Headlights required</label>
                        </div>
                        <div className="form-group form-check">
                            <input value={128} type="checkbox" name="Next to carpool/HOV/bus lane"  onChange={this.handleInputChange} className="form-check-input"/>
                            <label className="form-check-label">Next to carpool/HOV/bus lane</label>
                        </div>
                    </div>

这是我的处理方法

handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
        filterObj:{...this.state.filterObj,...{[name]: value}}
    });
}

我想在这个主题上得到帮助。我使用reactjs，但这似乎是更纯粹的javascript问题

JavaScript

来源：https://stackoverflow.com/questions/50049770/i-need-to-turn-this-select-to-a-checkbox

1条答案

按热度按时间

ttisahbt1#

这个常规问题，所以我决定举两个例子来处理多个复选框和单个复选框'radio inputs'
不需要为每个输入放置onChange，因为您为父div定义了onChange

- 多个复选框**

<div name="flags" onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
      <label forhtml="road-typeControlSelect">Flags</label>
      <div className="form-group form-check">
        <input value={0} type="checkbox" name="flags" className="form-check-input" />
        <label className="form-check-label">All</label>
      </div>
      <div className="form-group form-check">
        <input value={1} type="checkbox" name="flags"  className="form-check-input" />
        <label className="form-check-label">Tunnel</label>
      </div>
      <div className="form-group form-check">
        <input value={16} type="checkbox" name="flags" className="form-check-input" />
        <label className="form-check-label">Unpaved</label>
      </div>
      <div className="form-group form-check">
        <input value={32} type="checkbox" name="flags"  className="form-check-input" />
        <label className="form-check-label">Headlights required</label>
      </div>
      <div className="form-group form-check">
        <input value={128} type="checkbox" name="flags"  className="form-check-input" />
        <label className="form-check-label">Next to carpool/HOV/bus lane</label>
      </div>
    </div>

然后在handleInputChange函数中，检查输入值是否存在将删除它，如果不存在将添加它

handleInputChange = (e) => {
    let checkedBox = e.target.value;
    if(this.state.flages.indexOf(checkedBox) !== -1){
      console.log(checkedBox, 'deleted!')
      this.setState(prevState=> ({
        flages: prevState.flages.filter(d => d !== checkedBox)
      })) // deleting the value from array if exist
    }else{
      this.setState(prevState => ({ flages: [...prevState.flages, checkedBox] }));
    }
  }

- 信号复选框**

将输入类型的checkbox更改为radio
所有输入名称属性应相同

<div name="flags" onChange={this.handleInputChange} className="form-control" id="road-typeControlSelect">
  <label forhtml="road-typeControlSelect">Flags</label>
  <div className="form-group form-check">
    <input value={0} type="radio" name="flags" className="form-check-input" />
    <label className="form-check-label">All</label>
  </div>
  <div className="form-group form-check">
    <input value={1} type="radio" name="flags"  className="form-check-input" />
    <label className="form-check-label">Tunnel</label>
  </div>
  <div className="form-group form-check">
    <input value={16} type="radio" name="flags" className="form-check-input" />
    <label className="form-check-label">Unpaved</label>
  </div>
  <div className="form-group form-check">
    <input value={32} type="radio" name="flags"  className="form-check-input" />
    <label className="form-check-label">Headlights required</label>
  </div>
  <div className="form-group form-check">
    <input value={128} type="radio" name="flags"  className="form-check-input" />
    <label className="form-check-label">Next to carpool/HOV/bus lane</label>
  </div>
</div>

在handleInputChange函数中

handleInputChange = (e) => {
    let checkedBox = e.target.value;
    this.setState({ flages: checkedBox})
  }

赞(0）回复(0）举报 2022-12-02

我来回答

javascript 我需要将此选择转换为复选框

1条答案

相关问题

热门标签

最新问答