单击其他单选按钮后取消选中单选按钮答案

【问题标题】：Unchecking a radio button after clicking a different one单击其他单选按钮后取消选中单选按钮
【发布时间】：2015-01-01 01:49:44
【问题描述】：

我正在制作一个带有两个按钮（upvote / downvote）的投票系统。我已经使用输入和标签标签来创建它，但是有一个问题：

如果我使用单选按钮，我可以投票赞成或反对，但我不能取消投票。

如果我使用复选框，我可以取消投票，但我也可以上下投票。

我想要实现的是只能投赞成票或反对票，同时还能删除投票（想想 reddit）。

我已经彻底寻找答案，我发现这不可能用 CSS 做。那里有很多脚本，问题是我对JavaScript或jQuery一无所知，所以我不知道如何实现代码。

我认为最简单的解决方案是在我单击 upvote 时取消选中 downvote 按钮，反之亦然，但同样，我不知道这段代码的外观或如何实现它。

也许有一个更简单的解决方案，使用纯 CSS 来更改另一个按钮的外观，即使它已被选中？我不知道，但如果存在这样的解决方案，我更愿意使用。

我的代码：

input[type=radio] {
  display: none
}
#up {
  width: 20px;
  height: 16px;
  background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png) left top;
  position: absolute;
  left: 50px;
  top: 50px
}
#down {
  width: 20px;
  height: 16px;
  background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png) left bottom;
  opacity: 0.5;
  position: absolute;
  left: 50px;
  top: 84px
}
#vote {
  width: 21px;
  height: 18px;
  text-align: center;
  font-size: 26px;
  line-height: 18px;
  position: absolute;
  left: 50px;
  top: 66px;
  z-index: -1
}
#up:hover {
  background-position: top;
  cursor: pointer
}
#upvote:checked ~ #up {
  background-position: top;
}
#upvote:checked ~ #vote {
  color: #DC5B28;
  z-index: 1
}
#down:hover {
  background-position: bottom;
  cursor: pointer;
  opacity: 1
}
#downvote:checked ~ #down {
  background-position: bottom;
  opacity: 1
}
#downvote:checked ~ #vote {
  color: #3580DD
}
#no {
  position: absolute;
  display: none;
  background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png)
}
#upvote:checked ~ #no {
  display: block;
  background-position: left top;
  left: 50px;
  top: 50px
}
#downvote:checked ~ #no {
  display: block;
  background-position: left bottom;
  left: 50px;
  top: 84px;
  opacity: 0.5
}

<input type="radio" name="vote" value="+1" id="upvote">
<label for="upvote" id="up"></label>
<input type="radio" name="vote" value="-1" id="downvote">
<label for="downvote" id="down"></label>
<input type="radio" name="vote" value="0" id="novote">
<label for="novote" id="no"></label>
<div id="vote">•</div>

【问题讨论】：

请显示您尝试过的代码或正在使用的代码。即使您不懂 Javascript，也至少向我们展示您的 HTML，以便我们了解它的外观。
@BlackBird 是的，我的错，应该事先包含它。
查看 StackOverflow 投票按钮的源代码 :)

标签： javascript html css

【解决方案1】：

如果你想要一个纯 CSS 的解决方案，你可以尝试添加一个默认隐藏的第三个选项，它代表没有投票。

然后，当用户赞成或反对时，会显示第三个选项，它会与所选选项重叠。

因此，当用户认为自己再次点击了选中的选项时，实际上是在选择不投票选项。

#vote {
  position: relative;
}
#vote > input {
  display: none;                    /* Hide radio buttons */
}
#vote > label {
  cursor: pointer;
  display: block;
  width: 0;
  border: 50px solid;               /* We will make them look like... */
  border-color: black transparent;  /* ...triangles using borders */
}
#upvote + label {                   
  border-top: none;                 /* Triangulating */
}
#downvote + label {                 
  border-bottom: none;              /* Triangulating */
  margin-top: 15px;                 /* Space between triangles */
}
#vote > input:checked + label {     
  border-color: orange transparent; /* Highlight chosen option */
}
#vote > #novote-label { 
  display: none;                    /* Hide it by default */
  position: absolute;               /* Take it out of the normal flow */
  border-top: none;
  border-color: transparent;
}
#upvote:checked ~ #novote-label {   /* Display it overlapping upvote */
  display: block;
  top: 0;
}
#downvote:checked ~ #novote-label { /* Display it overlapping downvote */
  display: block;
  bottom: 0;
}

<div id="vote">
  <input type="radio" name="vote" value="+1" id="upvote" />
  <label for="upvote"></label>
  <input type="radio" name="vote" value="-1" id="downvote" />
  <label for="downvote"></label>
  <input type="radio" name="vote" value="0" id="novote" />
  <label for="novote" id="novote-label"></label>
</div>

只需少量更改，它也可以通过键盘访问：

#vote {
  position: relative;
}
#vote > input {                      /* Hiding in a keyboard-accesible way */
  opacity: 0;
  position: absolute;
  z-index: -1;
}
#vote > input:focus + label {
  outline: 1px dotted #999;          /* Keyboard friendly */
}
#vote > label {
  cursor: pointer;
  display: block;
  width: 0;
  border: 50px solid;               /* We will make them look like... */
  border-color: black transparent;  /* ...triangles using borders */
}
#upvote + label {                   
  border-top: none;                 /* Triangulating */
}
#downvote + label {                 
  border-bottom: none;              /* Triangulating */
  margin-top: 15px;                 /* Space between triangles */
}
#vote > input:checked + label {     
  border-color: orange transparent; /* Highlight chosen option */
}
#vote > #novote-label { 
  display: none;                    /* Hide it by default */
  position: absolute;               /* Take it out of the normal flow */
  border-top: none;
  border-color: transparent;
}
#upvote:checked ~ #novote-label {   /* Display it overlapping upvote */
  display: block;
  top: 0;
}
#downvote:checked ~ #novote-label { /* Display it overlapping downvote */
  display: block;
  bottom: 0;
}

<div id="vote">
  <input type="radio" name="vote" value="+1" id="upvote" />
  <label for="upvote"></label>
  <input type="radio" name="vote" value="-1" id="downvote" />
  <label for="downvote"></label>
  <input type="radio" name="vote" value="0" id="novote" />
  <label for="novote" id="novote-label"></label>
</div>

上面的 sn-ps 使用边框来模拟三角形/箭头。同样，也可以使用背景图片。

#vote {
    position: relative;
}
#vote > input {
    display: none;
}
#vote > label {
    cursor: pointer;
    display: block;
    width: 20px;
    height: 16px;
    background-image: url('http://i.stack.imgur.com/36F2b.png');
}
#vote > #up {
    background-position: left top;
}
#vote > #down {
    background-position: left bottom;
}
#upvote:checked ~ #up {
    background-position: top;
}
#downvote:checked ~ #down {
    background-position: bottom;
}
#vote > #no {
    display: none;
    position: absolute;
    background: none;
}
#upvote:checked ~ #no {
    display: block;
    top: 0;
}
#downvote:checked ~ #no {
    display: block;
    bottom: 0;
}

<div id="vote">
    <input type="radio" name="vote" value="+1" id="upvote" />
    <label for="upvote" id="up"></label>
    <input type="radio" name="vote" value="-1" id="downvote" />
    <label for="downvote" id="down"></label>
    <input type="radio" name="vote" value="0" id="novote" />
    <label for="novote" id="no"></label>
</div>

【讨论】：

1+.. 很好的解决方案；好逻辑！
谢谢，这正是我想要的。我尝试使用您的解决方案调整我的代码，但我做错了什么，请您检查一下吗？
是的，我终于明白为什么我的代码不起作用了。与您不同，我分别指定了每个按钮的属性，因此当我添加不投票时，它没有任何维度。设置它的宽度和高度解决了它。非常感谢您的帮助。
隐藏输入和设置标签样式是键盘无法访问的。
@danielnixon 好点。我添加了一个键盘可访问的替代方案。

【解决方案2】：

您有一个纯 CSS 解决方案，这是一个 javascript 版本。它在“投票”按钮的祖先上放置了一个点击监听器。单击并选中一个按钮时，它会取消选中同一容器中的其他投票按钮，因此一次只检查一个投票。它适用于任意数量的投票按钮（您可能会说 +1、+2 等）。

如果单击复选框取消选中它，例如取消投票时，该函数不执行任何操作。确保脚本放在容器之后，或者使用加载事件。侦听器可以附加到任意数量的容器，只要每个容器只包含一组按钮即可。

<!-- A container for the vote buttons -->
<div id="voteContainer">
  <input type="checkbox" name="vote" value="+1" id="upvote">
  <label for="upvote" id="up">Up</label>
  <br>
  <input type="checkbox" name="vote" value="-1" id="downvote">
  <label for="downvote" id="down">Down</label>
</div>

<script>
(function() {
  var div = document.getElementById('voteContainer');
  if (div) div.onclick = setVote;

  // Looks at the state of els
  function setVote(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;


    // If target checkbox is checked, uncheck all others
    if (target.checked) {
      var els = this.querySelectorAll('input[name=' + target.name + ']')

      for (var i=0; i<els.length; i++) {
        els[i].checked = els[i] === target;
      }
    }
  }
}());
</script>

以上内容应该适用于所有现代浏览器和 IE 回到 IE 8。如果它需要在旧版浏览器中运行，这可以很容易地完成，特别是如果页面中只有一组投票按钮（它需要对var els = ... 行的小修改）。

标签元素不需要 ID 即可运行脚本。

【讨论】：