Question

I am creating a review-control and using radiobutton for grade selection. I wrote some simple js to add a diffrent class when a radiobutton is checked.

The problem is that you can check every radio button, I want the user only to check one value. I writing this in javascript, but jQuery is welcome or a smartare solution.

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

You got to remove the checked class for previously checked item.

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

​