Javascript 我需要把这个选择变成一个复选框

我很难做到这一点，我必须改变一个复选框形式的选择形式 我可以更改视觉效果，但复选框不能像“选择”那样工作

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

---

在这个话题上，我非常感谢你的帮助。我在使用reactjs，但这似乎是一个更纯粹的javascript问题，这是一个常规问题，所以我决定举两个例子来处理多个复选框和一个复选框

无需为每个输入设置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>

信号复选框

将

复选框

更改为输入类型的

收音机

所有输入名称属性都应相同

---

每个复选框的名称应该是

标志

。我尝试了这个方法，但没有任何结果。您对单选按钮的看法是正确的，因为现在我只想一次发送一个值。我删除了div上的onChange，输入已经有onChange变量，仍然不起作用。尝试过的bot，不起作用，第一个抛出一个错误“this.state.flages未定义”，第二个，只是不过滤信息，如果选择它就标记它抱歉，我的错误，它起作用了，你现在是我的新上帝，我赞美你我很高兴能帮助你

   <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 = (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] }));
    }
  }

<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 = (e) => {
    let checkedBox = e.target.value;
    this.setState({ flages: checkedBox})
  }