Radio étoiles

by ydelmas

HTML

<div class="etoiles">
    <label>★<input type="radio" name="a" value="1" onchange="changeEtoiles(this)" /></label>
    <label>★<input type="radio" name="a" value="2" onchange="changeEtoiles(this)" /></label>
    <label>★<input type="radio" name="a" value="3" onchange="changeEtoiles(this)" /></label>
    <label>★<input type="radio" name="a" value="4" onchange="changeEtoiles(this)" /></label>
    <label>★<input type="radio" name="a" value="5" onchange="changeEtoiles(this)" /></label>
</div>

CSS

.etoiles label { color: grey; }
/* CSS 2 */
.etoiles__etat-1 :first-child,
.etoiles__etat-2 :first-child,
.etoiles__etat-2 :first-child + * {color:#C90;}
/* CSS 3 */
.etoiles__etat-3 :nth-child(-n+3),
.etoiles__etat-4 :nth-child(-n+4),
.etoiles__etat-5 :nth-child(-n+5) {color:#C90;}

JavaScript

function test(e) {
    var n = e.value;
    e.parentNode.parentNode.className = 'etoiles etoiles__etat-' + n;
}