Javascript 如何仅选择一个单选按钮？

我正在创建一个复习控件，并使用radiobutton选择成绩。我编写了一些简单的js来在选中radiobutton时添加一个不同的类

问题是你可以检查每个单选按钮，我希望用户只检查一个值。我是用javascript写这篇文章的，但是jQuery是受欢迎的或者是smartare解决方案

演示：

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>

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");
    }
}

/*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;
}

CSS:

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

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");
    }
}

/*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;
}

---

您必须为以前选中的项目删除

选中的

类

jsFiddle：

功能更改\u状态（obj）{
如果（对象已选中）{
var checkedNodes=getElementsByClassName（文档“checked”）；
对于（var i=0；如果第一次输入是一个复选框？jQuery UI不具备这方面的功能吗？谢谢，您能解释一下regexp部分吗..如果您喜欢
getElementsByClassName（），可以对代码稍加注释以供我理解并非所有浏览器都支持
。该函数检查是否本机支持

getElementsByClassName。如果不支持，请使用Dustin Diaz的方法搜索元素。它会循环所有节点，并使用正则表达式匹配CSS类名。