單擊其他按鈕后取消選中單選按鈕

Question

我正在制作一個帶有兩個按鈕的投票系統（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> 

Answer 1

如果您想要一個僅限CSS的解決方案，您可以嘗試添加一個默認隱藏的第三個選項，它代表沒有投票。

然后，當用戶upvotes或downvotes時，顯示第三個選項，並且它與所選選項重疊。

因此，當用戶認為他再次點擊所選擇的選項時，他實際上是選擇無投票選項。

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

上面的片段使用邊框來模擬三角形/箭頭。 類似地，也可以使用背景圖像。

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

Answer 2

你有一個純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>

以上應該適用於所有現代瀏覽器和IE回到IE 8.如果它需要在舊版瀏覽器中工作，這可以很容易地完成，特別是如果頁面中只有一組投票按鈕（它需要一個小的修改到var els = ... line）。

標簽元素不需要ID來使腳本起作用。