radio test

HTML

<form id="form1" >
<div class="catt">
 <a   href="#" name="sex[1]" class="cattsel" title="" >男
<input type="radio"  id="spec_value_{1}" name="sex[1]" checked value="男" />
</a>
<a   href="#" name="sex[1]" title="">女
<input type="radio"  id="spec_value_{1}" name="sex[1]" value="女" />
</a>
 <br />
<br />
<a  href="javascript:;" name="{2}"  title="">十分满意
<input type="radio" style="display:none" id="spec_value_{2}" name="sex[2]" value="十分满意" />
</a>
<a  href="javascript:;" name="{2}" title="">满意
<input type="radio" style="display:none" id="spec_value_{2}" name="sex[2]" value="满意" />
</a>
<a   href="javascript:;" name="{2}" title="">不满意
<input type="radio" style="display:none" id="spec_value_{2}" name="sex[2]" value="不满意" />
</a>
<a  href="javascript:;" name="{2}" title="">非常差
<input type="radio" style="display:none" id="spec_value_{2}" name="sex[2]" value="非常差" />
</a>

<br />
</div>
<input type="submit" value="submit"  id="btnSubmit" />
</form>

CSS

.catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;}
.catt a{border: #c8c9cd 1px solid;  text-align: center; background-color: #fff; margin-left:5px;margin-top:6px;padding-left: 10px;padding-right: 10px;display: block; white-space: nowrap; color: #000; text-decoration: none;float:left;}
.catt a:hover {border:#ff6701 2px solid; margin: -1px; margin-left:4px;margin-top:5px;}
.catt a:focus {outline-style:none;}
.catt .cattsel {border:#ff6701 2px solid; margin: -1px;background: url("test.gif") no-repeat bottom right; margin-left:4px;margin-top:5px;}
.catt .cattsel a:hover {border: #ff6701 2px solid;margin:-1px;background: url("test.gif") no-repeat bottom right;}

JavaScript

$(function(){
 $('.catt a').click(function(){
  $(this).parent().each(function () {
         $('.catt a').removeClass("cattsel");
		 $('.catt a').find('input').removeAttr('checked');
        });
        $(this).addClass("cattsel");
        $("input",this).prop("checked", true);
		alert($(this).text());
 })
})