JSFiddle - React, Tailwind, and code Playground

by ccsnet

HTML

<div id="eventscontent" data-role="content">

                <div id="eventlistcontrolsdiv1" align="center" >
                  <form id="eventlistcontrols" name="eventlistcontrols" class="eventlistcontrols" method="post" action="">
                      <div id="eventlistbutton" align="center">
                          <div data-role="fieldcontain">
                              <fieldset data-role="controlgroup" data-type="horizontal" >
                              <input id="bydistance" type="radio" name="eventsortby" checked="true" />
                              <label for="bydistance">By Distance</label>
                              <input id="bytype" type="radio" name="eventsortby" />
                              <label for="bytype">By Type</label>
                              <input id="byimpact" type="radio" name="eventsortby" />
                              <label for="byimpact">By Impact</label>
                              </fieldset>
                          </div>
                      </div>
                  </form>
                </div>
            </div>

JavaScript

$(document).ready(function() {
    $(function() {
        $("input[name='eventsortby']").click(function() {
            alert($("input[name=eventsortby]:radio:checked").attr("id"));
        })

    });
});