复选框已选中 CSS

Question

大家好，我正在尝试使用 CSS 创建一个复选框。

我从 codepen.io

创建了这个 DEMO

在此演示中，您可以看到有一个树形复选框按钮 (YES,NO,MAYBE)

我的问题是：假设用户首先单击按钮 YES.The 然后用户放弃并单击“否”按钮。我想在用户单击“否”按钮然后“是”按钮自动取消选中时进行设置。我该怎么做才能有人帮助我？

HTML

<div class="container">
  <input type="checkbox" class="yesno"/>Yes
  <input type="checkbox" class="yesno"/>no
  <input type="checkbox" class="yesno"/>maybe
</div>

CSS

.container {
  margin: 50px;
}
.yesno {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 20px;
  border-radius: 14px;
  outline: 0;
  background: #9da6b0;
  -webkit-transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.yesno:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 11px;
  position: relative;
  top: 3px;
  left: 3px;
  -webkit-transition: all 0.15s ease-in-out;
}
.yesno:checked {
  background: #529ecc;
}
.yesno:checked:after {
  left: 13px;
}

Answer 1

您可以简单地使这些元素具有相同名称属性的单选按钮：

Updated Example

这样做，元素是互斥的，一次只能选择一个。

<div class="container">
  <input type="radio" name="yes-no" class="yesno"/>Yes
  <input type="radio" name="yes-no" class="yesno"/>no
  <input type="checkbox" class="yesno"/>maybe
</div>

Answer 2

它们绝对应该是单选按钮，但这里是 JavaScript。

<div class="container">
  <input type="checkbox" class="yesno" id="yesCheckbox"/>Yes
  <input type="checkbox" class="yesno" id="noCheckbox"/>no
  <input type="checkbox" class="yesno" id="maybeCheckbox"/>maybe
</div>

$('#yesCheckbox').click(function() {
  if($(this.prop('checked')))
  {
    $('#noCheckbox').prop('checked', false);
  }
});

复选框已选中 CSS

Checkbox checked CSS

javascript

css

checkbox

jquery