如何僅選擇一個單選按鈕？

Question

我正在創建一個檢查控件，並使用單選按鈕進行成績選擇。 我編寫了一些簡單的js，以在選中單選按鈕時添加一個不同的類。

問題是您可以檢查每個單選按鈕，我希望用戶僅檢查一個值。 我用javascript編寫，但歡迎使用jQuery或smartare解決方案。

演示 ： http : //jsfiddle.net/cbqt8/5/

HTML：

<div class="reviews">
<label class="input-check">
  <input onchange="change_state(this)" type="radio" value="1"   name="review[rating]" /> Bad
</label>
<label class="input-check">
  <input onchange="change_state(this)" type="radio" value="2"   name="review[rating]" /> Its okey
</label>
<label class="input-check">
  <input onchange="change_state(this)" type="radio" value="3"   name="review[rating]" /> Great
</label>
<label class="input-check">
  <input onchange="change_state(this)" type="radio" value="4"   name="review[rating]" /> Awesome
</label>
<label class="input-check">
  <input onchange="change_state(this)" type="radio" value="5"   name="review[rating]" />Super
</label>
</div>

JavaScript：

function change_state(obj) {
    if (obj.checked) {
        //if radiobutton is being checked, add a "checked" class
        obj.parentNode.classList.add("checked");
    }
    else {
        //else remove it
        obj.parentNode.classList.remove("checked");
    }
}

CSS：

/*reviews box*/
.reviews{
    padding: 25px;
    margin:0;
}
/*this is the style of an radio "button"*/
.input-check {
    display: inline-block;
    height:20px;
    padding:5px 8px;
    background:green;
    width:90px;
    color:white;
    text-align: center;
}
/* This is the style for a radio "button" */
.input-check.checked{
    background:red;
    color:black;
    font-weight:bold;
}
/*Hide the radiobutton*/
.input-check input {
    display:none;
}

Answer 1

您必須刪除先前檢查項目的checked類別。

jsFiddle： http : //jsfiddle.net/P8jB8/

function change_state(obj) {

    if (obj.checked) {
        var checkedNodes = getElementsByClassName(document, "checked");
        for (var i=0;i<checkedNodes.length;i++) {
            checkedNodes[i].classList.remove("checked");
        }

        //if radiobutton is being checked, add a "checked" class
        obj.parentNode.classList.add("checked");
    }
    else {
        //else remove it
        obj.parentNode.classList.remove("checked");
    }
}

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}