1

我正在创建一个审查控制并使用单选按钮进行等级选择。我写了一些简单的 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;
}
4

1 回答 1

0

您必须删除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);
  }
}

​</p>

于 2012-12-07T02:06:26.953 回答