JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<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>

CSS

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; }

JavaScript

$(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);            
        }
    });
});