Javascript 单击其他单选按钮后取消选中单选按钮

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

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

如果我使用复选框，我可以取消投票，但我也可以投赞成票和反对票

我想要实现的是能够只投赞成票或反对票，同时也能够取消投票（想想reddit）

我已经彻底地寻找了一个答案，我发现这是不可能与CSS。有很多脚本，问题是我不知道JavaScript或jQuery，所以我不知道如何实现代码

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

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

我的代码：

输入[类型=收音机]{
显示：无
}
#向上{
宽度：20px；
高度：16px；
背景：url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png)左上；
位置：绝对位置；
左：50px；
顶部：50px
}
#向下{
宽度：20px；
高度：16px；
背景：url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png)左下；
不透明度：0.5；
位置：绝对位置；
左：50px；
顶部：84px
}
#投票{
宽度：21px；
高度：18px；
文本对齐：居中；
字号：26px；
线高：18px；
位置：绝对位置；
左：50px；
顶部：66px；
z指数：-1
}
#向上：悬停{
背景位置：顶部；
光标：指针
}
#向上投票：已选中~#向上投票{
背景位置：顶部；
}
#向上投票：选中~#投票{
颜色：#DC5B28；
z指数：1
}
#向下：悬停{
背景位置：底部；
光标：指针；
不透明度：1
}
#下一票：选中~#下一票{
背景位置：底部；
不透明度：1
}
#向下投票：选中~#投票{
颜色：3580DD
}
#没有{
位置：绝对位置；
显示：无；
背景：url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png)
}
#向上投票：选中~#否{
显示：块；
背景位置：左上；
左：50px；
顶部：50px
}
#否决票：选中~#否{
显示：块；
背景位置：左下；
左：50px；
顶部：84px；
不透明度：0.5
}

•

如果您想要一个只支持CSS的解决方案，您可以尝试添加一个默认的隐藏第三选项，它表示不投票

然后，当用户向上投票或向下投票时，将显示第三个选项，它与所选选项重叠

因此，当用户认为他正在再次单击所选选项时，实际上他正在选择不投票选项

#投票{
位置：相对位置；
}
#投票>输入{
显示：无；/*隐藏单选按钮*/
}
#投票>标签{
光标：指针；
显示：块；
宽度：0；
边框：50px实心；/*我们将使它们看起来像*/
边框颜色：黑色透明；/*…使用边框的三角形*/
}
#向上投票+标签{
边框顶部：无；/*三角剖分*/
}
#向下投票+标签{
边框底部：无；/*三角剖分*/
边距顶部：15px；/*三角形之间的间距*/
}
#投票>输入：选中+标签{
边框颜色：橙色透明；/*高亮显示所选选项*/
}
#投票>#诺富特标签{
显示：无；/*默认情况下隐藏它*/
位置：绝对；/*将其从正常流量中取出*/
边界顶部：无；
边框颜色：透明；
}
#upvote：选中~#novote标签{/*显示重叠upvote*/
显示：块；
排名：0；
}
#下一票：选中~#novote标签{/*显示重叠下一票*/
显示：块；
底部：0；
}

---

您有一个纯CSS解决方案，下面是一个javascript版本。它将单击侦听器放置在“投票”按钮的祖先上。单击并选中按钮时，将取消选中同一容器中的其他投票按钮，以便一次只选中一个投票。它可以使用任意数量的投票按钮（您可能会说+1、+2等）

如果单击复选框取消选中该复选框，例如取消投票时，该功能将不执行任何操作。确保脚本放在容器之后，或使用load事件。只要每个容器只包含一组按钮，侦听器就可以连接到任意多个容器

<!-- 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>

向上的


向下
（功能（）{
var div=document.getElementById（'voteContainer'）；
如果（div）div.onclick=setVote；
//查看els的状态
函数setVote（事件）{
event=event | | window.event；
var target=event.target | | event.src元素；
//如果选中目标复选框，则取消选中所有其他复选框
if（target.checked）{
var els=this.querySelectorAll（'input[name='+target.name+']'））
对于（var i=0；i请显示您尝试过的代码或正在使用的代码。即使您不懂Javascript，也至少向我们显示您的HTML，以便我们了解它的外观。@BlackBird是的，我的错，应该事先包含它。请检查源代码中StackOverflow的投票按钮：）1+…很好的解决方案；很好的逻辑！谢谢你，这正是我想要的。我尝试用你的解决方案调整我的代码，但我做错了什么，你能检查一下吗？是的，我终于意识到为什么我的代码不起作用。与你不同，我分别指定了每个按钮的属性，所以当我添加否决票时，它没有任何维度。是的设置其宽度和高度解决了此问题。非常感谢您的帮助。隐藏输入和设置标签样式是键盘无法访问的。@danielnixon说得好。我添加了一个键盘可访问的替代方案。