Javascript 3状态CSS切换开关

我一直在寻找一个3状态切换开关，但运气不太好

基本上，我需要一个具有以下状态的开关： |开|不适用|关|

默认情况下，滑块从中间开始，一旦用户向左或向右滑动，它们就不能返回到N/A（未回答）状态。

---

有人知道如何处理这个问题吗？

除了gat的回复之外，还可以通过引导将其建模为一个分组单选按钮：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="On" />ON</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="NA" />N/A</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="Off" />OFF</label>
</div>

在…上
不适用
关

---

jsiddle:

尝试以下方法：

。开关切换{
宽度：10em；
}
.开关切换标签：未（.disabled）{
光标：指针；
}

在…上
关

作为jQuery插件

函数过滤器（值）{
value=parseInt（value，10）；//转换为整数
如果（值==1）{
$（'#RangeFilter'）。removeClass（'rangeAll'，'RangeAssive'）。addClass（'rangeActive'）；
$（'span'）.text（'Active'）；
}else if（值===2）{
$（'#RangeFilter'）。removeClass（'rangeActive'，'RangeAssive'）。addClass（'rangeAll'）；
$（'span'）.text（'All'）；
}else if（值===3）{
$（'#RangeFilter'）。removeClass（'rangeAll'，'rangeActive'）。addClass（'RangeAssive'）；
$（'span'）.text（'Passive'）；
}
}

所有

我创建了一个JSFIDLE，它演示了一个功能齐全的三状态开关。请注意，JSFIDLE中的javascript窗口工作不正常，因此脚本加载到html窗口中

功能切换按钮（范围）{
var val=范围值；
如果（val==1）{
//更改滑块背景的颜色
range.className=“rangeFalse”；
//更改文本
$（'.toggle false msg'）.attr（'id'，'textActive'）；
$（'.toggle neutral msg'）.attr（'id'，''）；
$（'.toggle true msg'）.attr（'id'，''）；
}else if（val==2）{
//更改滑块背景的颜色
range.className=“rangeNeutral”；
//更改文本
$（'.toggle false msg'）.attr（'id'，''）；
$（'.toggle neutral msg'）.attr（'id'，'textActive'）；
$（'.toggle true msg'）.attr（'id'，''）；
}else if（val==3）{
//更改滑块背景的颜色
range.className=“rangeTrue”；
//更改文本
$（'.toggle false msg'）.attr（'id'，''）；
$（'.toggle neutral msg'）.attr（'id'，''）；
$（'.toggle true msg'）.attr（'id'，'textActive'）；
}
}

.test\u div{
高度：50px；
宽度：50px；
背景：#204d75！重要；
顶部：100px；
位置：相对位置；
显示：块；
}
.切换容器{
位置：相对位置；
宽度：8em；
边缘：1米；
填充：0.25em；
边框：薄实浅灰色；
文本对齐：居中；
}
.射程场{
显示：内联块；
宽度：100px；
边际：0px；
边界半径：2px；
}
输入[类型=范围]{
-webkit外观：无；
保证金：0；
宽度：100%；
填充：0px；
大纲：无；
边界：无；
}
.切换错误消息{
显示：无；
不透明度：.2；
过渡区：5s不透明度；
显示：内联块；
位置：相对位置；
顶部：-8px；
}
.toggle true msg{
显示：无；
不透明度：.2；
过渡区：5s不透明度；
显示：内联块；
位置：相对位置；
顶部：-8px；
}
.切换中性味精{
显示：无；
不透明度：.2；
过渡区：5s不透明度；
显示：无；
位置：相对位置；
顶部：-8px；
}
#rangeActive{
背景颜色：蓝色；
}
#文本活动{
不透明度：1；
颜色：黑色；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：30px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000；
背景#3071A9；
边界半径：0px；
边框：0px实心#000000；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：0px 0px 0px 000000；
边框：0px实心#000000；
高度：30px；
宽度：19px；
边界半径：0px；
背景：#FFFFFF；
光标：指针；
-webkit外观：无；
边际上限：0px；
}
输入[类型=范围]：焦点：--webkit滑块可运行轨迹{
背景#3071A9；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：30px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000；
背景#3071A9；
边界半径：0px；
边框：0px实心#000000；
}
输入[类型=范围]：-moz范围拇指{
盒影：0px 0px 0px 000000；
边框：0px实心#000000；
高度：30px；
宽度：19px；
边界半径：0px；
背景：#FFFFFF；
光标：指针；
}
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：30px；
光标：指针；
动画：0.2s；
背景：透明；
边框颜色：透明；
颜色：透明；
}
输入[类型=范围]：-ms填充下限{
背景#3071A9；
边框：0px实心#000000；
边界半径：0px；
盒影：0px 0px 0px 000000；
}
输入[类型=范围]：-ms填充上限{
背景#3071A9；
边框：0px实心#000000；
边界半径：0px；
盒影：0px 0px 0px 000000；
}
输入[类型=范围]：-ms thumb{
盒影：0px 0px 0px 000000；
边框：0px实心#000000；
高度：30px；
宽度：19px；
边界半径：0px；
背景：#FFFFFF；
光标：指针；
}
输入[类型=范围]：焦点：-毫秒填充下限{
背景#3071A9；
}
输入[类型=范围]：焦点：--ms填充上限{
背景#3071A9；
}
.rangeFalse:：-webkit滑块可运行轨迹{
背景：#5d0a0a！重要；
}
.rangeFalse:：-webkit滑块拇指{
背景：白色！重要；
}
.rangeNeutral:：-webkit滑块可运行轨迹{
背景：#204d75！重要；
}
.rangeNeutral:：-webkit滑块拇指{
背景：白色！重要；
}
.rangeTrue:：-webkit滑块可运行轨迹{
背景：#0e4e1f！重要；
}
.rangeTrue:：-webkit滑块拇指{
背景：白色！重要；
}

关
中立的
在…上

。开关切换{
浮动：左；
背景：#242729；
}
.开关切换输入{
位置：绝对位置；
不透明度：0；
}
.开关切换输入+标签{
填充：7px；
浮动：左；
颜色：#fff；
光标：poi
/*React Component*/
class ThreeWayToggleSwitchComponent extends React.Component {
  constructor(props) {
    super(props);

    this.threeWayToggleSwitchComponentDivRef = React.createRef();
    this.option1Ref = React.createRef();
    this.option3Ref = React.createRef();
    this.slidingButtonDivRef = React.createRef();

    this.state = {
      selectedOption: "Option 1"
    };

    this.handleOptionChange = this.handleOptionChange.bind(this);
    this.keyboardPress = this.keyboardPress.bind(this);
  }

  handleOptionChange(event) {
    if (event.target.value === "Option 1") {
      if (this.state.selectedOption === "Option 2") {
        this.setState({
          selectedOption: event.target.value
        });

        this.slidingButtonDivRef.current.style.transform = "translate(0px)";
        this.slidingButtonDivRef.current.style.background = "green";  
      }
      else if (this.state.selectedOption === "Option 3") {
        this.setState({
          selectedOption: "Option 2"
        });

        this.slidingButtonDivRef.current.style.transform = "translate(40px)";
        this.slidingButtonDivRef.current.style.background = "yellow";
      }
    }
    else if (event.target.value === "Option 2") {
      this.setState({
        selectedOption: "Option 2"
      });

      this.slidingButtonDivRef.current.style.transform = "translate(40px)";
      this.slidingButtonDivRef.current.style.background = "yellow";
    }
    else if (event.target.value === "Option 3") {
      if (this.state.selectedOption === "Option 1") {
        this.setState({
          selectedOption: "Option 2"
        });

        this.slidingButtonDivRef.current.style.transform = "translate(40px)";
        this.slidingButtonDivRef.current.style.background = "yellow";
      }
      else if (this.state.selectedOption === "Option 2") {
        this.setState({
          selectedOption: "Option 3"
        });

        this.slidingButtonDivRef.current.style.transform = "translate(80px)";
        this.slidingButtonDivRef.current.style.background = "red";
      }
    }
  }

  keyboardPress(event) { 
    if (event.keyCode === 37) {
      this.option1Ref.current.click();
    }
    else if (event.keyCode === 39) {
      this.option3Ref.current.click();
    }
  }

  componentDidMount() {
    this.threeWayToggleSwitchComponentDivRef.current.focus();
  }

  render() {    
    return(
      <div ref={this.threeWayToggleSwitchComponentDivRef} id="three-way-toggle-switch-component-div" tabIndex="0" onKeyDown={this.keyboardPress}>
        <div id="radio-buttons-and-sliding-button-container-div">
          <div id="radio-buttons-div">
            <label id="option-1-label" className="single-option-label" for="option-1">Label 1
              <input type="radio" ref={this.option1Ref} id="option-1" className="radio-input-class" name="radio-input" value="Option 1" checked={this.state.selectedOption === "Option 1"} onChange={this.handleOptionChange}/>
            </label>

            <label id="option-2-label" className="single-option-label" for="option-2">Label 2
              <input type="radio" id="option-2" className="radio-input-class" name="radio-input" value="Option 2" checked={this.state.selectedOption === "Option 2"} onChange={this.handleOptionChange}/>
            </label>

            <label id="option-3-label" className="single-option-label" for="option-3">Label 3
              <input type="radio" ref={this.option3Ref} id="option-3" className="radio-input-class" name="radio-input" value="Option 3" checked={this.state.selectedOption === "Option 3"} onChange={this.handleOptionChange}/>
            </label>
          </div>

          <div ref={this.slidingButtonDivRef} id="sliding-button-div">
          </div>
        <div>

        <div id="selected-option">Option Selected: {this.state.selectedOption}
        </div>

        <div id="keyboard-message">
          You can control the sliding button via the left arrow key or the right arrow key on your keyboard.
        </div>
      </div>
    );
  }
};

ReactDOM.render(<ThreeWayToggleSwitchComponent/>, document.getElementById("react-component-div"));

/*CSS Styling*/
#three-way-toggle-switch-component-div:focus {
  outline: none;
}

#radio-buttons-and-sliding-button-container-div {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 120px;
  border: 2px solid black;
  border-radius: 5px;
}

#sliding-button-div {
  position: absolute;
  display: inline-block;
  top: 0;
  height: 30px;
  width: 40px;
  background: green;
  transition: 0.8s;
  border-radius: 3px;
}

#radio-buttons-div {
  display: flex;
  justify-content: space-between;
}

.single-option-label {
  width: 100%;
  color: transparent;
}

.radio-input-class {
  display: none;
}

.switch-toggle  input:checked.toggle-no ~ a {
    background-color:  red;
 }

 .switch-toggle  input:checked.toggle-yes ~ a {
    background-color:  green;
 }

 .switch-toggle  input:checked.toggle-unset ~ a {
    background-color:  grey;
 }