复选框有3个状态

Question

我正在尝试实现一个包含三个/四个状态的复选框。请参阅下面的图片，了解我想要实现的目标。我确实有fa-link工作。但是，当我再次点击它而不是不显示fa-link时，我想显示一个带有fa-chain-broken的中间状态。

这是我到目前为止所拥有的。

＆＃13;

＆＃13;

input[type="checkbox"] {
  -webkit-appearance: initial;
  appearance: initial;
  outline: 1px solid #A9A9A9;
  width: 25px;
  height: 25px;
  background: #FFFFFF;
  position: relative;
}

input[type="checkbox"]:checked {
  background: #0073C0;
}

input[type="checkbox"]:checked:after {
  font-family: 'FontAwesome';
  content: "\f0c1";
  color: #fff;
  position: absolute;
  font-size: 22px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*outline: 1px solid #A9A9A9;*/
}

＆＃13;

<input id="box1" type="checkbox" />

＆＃13;

＆＃13;

＆＃13;

我确实让fa-link工作得很好。如何为fa-chain-broken添加另一个状态？如果CSS不是一个选项，则javascript完全正常。

Answer 1

常规复选框无法执行此操作。你需要使用一个标志。我要做的是使用一个与元素相关的计数器标志：

$(function() {
  $(".check").data("state", 0).addClass("unchecked");
  $(".multi-checkbox").click(function() {
    var states = ["unchecked", "partial", "checked"];
    var curState = $(this).find(".check").data("state");
    curState++;
    $(this).find(".check").removeClass("unchecked partial checked").addClass(states[curState % states.length]).data("state", curState % states.length);
  });
});

.multi-checkbox .check {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.multi-checkbox .check.unchecked i {
  display: none;
}

.multi-checkbox .check.partial i.fa-link {
  display: none;
}

.multi-checkbox .check.checked i.fa-chain-broken {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multi-checkbox">
  <span class="check">
    <i class="fa fa-chain-broken"></i>
    <i class="fa fa-link"></i>
  </span> Check me
</div>

我刚刚为这个答案写了这个片段。如果您有任何疑问，请告诉我。字体很棒，我们可以更好地完成它。