JS-код
<script>
handleClick = function(val) {
document.getElementById('selectnumber').innerHTML = val;
};
</script>
HTML-код
<ul><li><fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" onclick="handleClick('star5')" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" onclick="handleClick('star4')" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" onclick="handleClick('star3')" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" onclick="handleClick('star2')"name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" onclick="handleClick('star1')" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>
<asp:Button ID="Rating_btn" runat="server" Text="Rate" OnClick="Rating_btn_Click"/>
<br /><asp:Label ID="selectnumber" runat="server" Text=""></asp:Label>
css-код
.rating {float:left;}
.rating:not(:checked) > input {
position:absolute;
top:-9999px;
clip:rect(0,0,0,0); }
.rating:not(:checked) > label {
float:right;
width:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); }
.rating:not(:checked) > label:before {content: '★ ';}
.rating > input:checked ~ label {
color: #f70;
text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: gold;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);}
.rating > label:active {
position:relative;
top:2px;
left:2px; }
I 'Я пытаюсь получить значение звезды и отобразить его на моем экране.К сожалению, он этого не делает.