Question

大家好我想用CSS创建一个复选框。

我已经从 codepen.io

创建了 DEMO

在此演示中，您可以看到有一个树复选框按钮（是，否，可能）

我的问题是：假设用户首先点击按钮YES。然后用户放弃并点击否按钮。我想在用户点击“否”按钮然后“是”按钮自动取消选中时进行此操作。我怎么能这样做，任何人都可以帮助我？

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

2 个答案: