Progressive Enhancement: jQuery Rating

Turn off JavaScript, enhanced #1, enhanced #2

Markup

<form id="rate_this" action="" method="post">
	<div id="rating_scores">
		<label><input type="radio" value="1" name="rating" />1</label>
		<label><input type="radio" value="2" name="rating" />2</label>
		<label><input type="radio" value="3" name="rating" />3</label>
		<label><input type="radio" value="4" name="rating" />4</label>
		<label><input type="radio" value="5" name="rating" />5</label>
		<label><input type="radio" value="6" name="rating" />6</label>
		<label><input type="radio" value="7" name="rating" />7</label>
		<label><input type="radio" value="8" name="rating" />8</label>
		<label><input type="radio" value="9" name="rating" />9</label>
		<label><input type="radio" value="10" name="rating" />10</label>
		<input type="submit" value="Vote" />
	</div>
</form>
		

jQuery

$(document).ready(function() { 
	// hides the vote button
	$("input#vote_button").hide();

	// hides all radio buttons 
	$("form#rate_this input[@type=radio]").hide();

	// format the labels to look clickable 
	$("form#rate_this label").addClass("selector");

	// change the formatting of the label when it is hovered over 
	// by assigning a different class 
	$("label.selector").hover(
		function(){ 
			$(this).addClass("selector_h"); 
		}, function() { 
			$(this).removeClass("selector_h");
	});
	
	// v=1
	$("form#rate_this label").click(function() { 
		$(this).find("input").attr("checked","checked");
		$("input#vote_button").trigger("click"); 
	});
	
	// v=2
	$("form#rate_this label").click(function() { 
		$(this).find("input").attr("checked","checked");
		data = $("form").serialize();
	  $.ajax({
	    type: "POST",
	    url: "result.php",
			data: data, 
	    success: function(evt, request, settings) {
				$("#rating_result").html(evt);
	    },
	    error: function(msg) {
	      alert("Failed");
	    }
	  });
	});

});//end ready
		

article on somedirection