$(document).ready(function(){ $("a").on("click", function(e){ e.preventDefault(); if($(this).hasClass("sel")) { // already selected } else { $("a.sel").removeClass("sel"); $(this).addClass("sel"); var rid = $(this).attr('id'); var value = '[value="'+rid+'"]'; $('input:radio[name="category"]').filter(value).attr('checked', true); } }); });
body{margin:25px;} #catlinks .row a {color:#777; font-size: 0.9em; font-weight: bold; padding: 7px 8px; margin-right: 3px; border: 1px solid #fff;text-decoration:none; } #catlinks .row a:hover { border: 1px solid #dbdbdb; background: #eee; } #catlinks .row a.sel { background: #6b7fdd; color: #fff; border: 1px solid #6470a9; } #catlinks .row a.sel:hover { background: #4964e1; }
<form name="diggform" id="diggform" method="post" action="index.html"> <input type="radio" name="category" value="foo"> <input type="radio" name="category" value="bar"> <input type="radio" name="category" value="hoge"> <input type="radio" name="category" value="huga"> <section id="catlinks"> <div class="row"> <a href="#" class="c" id="foo">foo</a> <a href="#" class="c" id="bar">bar</a> <a href="#" class="c" id="hoge">hoge</a> <a href="#" class="c" id="huga">huga</a> </div> </section> </form>