JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<script src="https://public.tableausoftware.com/javascripts/api/tableau_v8.debug.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>
  <h1>Radio Buttons fire JS Function</h1>
  <hr>
  <h3>Problem/Question</h3>
  <hr>
  <p>I want the selection of a radio button to trigger a javascript function. My attempt does not work, what am I am doing wrong/missing?</p>
  <hr>
  <h3>Note:</h3>
  <p>The HTML and JS are extracted from a larger filet that include all approriate links to reuqired resources. The two functions chartAmount() and chartPercent() are defined in the larger document.</p>
  <hr>
  <hr>
  <div class="ui form">
    <div class="grouped fields">
      <label>Radio Button Select</label>
      <div class="field">
        <div class="ui slider checkbox">
          <input type="radio" name="charttype" checked="checked" value="percent">
          <label>Amount by Year</label>
        </div>
      </div>
      <div class="field">
        <div class="ui slider checkbox">
          <input type="radio" name="charttype" value="amount">
          <label>Percent by Year</label>
        </div>
      </div>
    </div>
  </div>

JavaScript

$('.field').click(function() {
    if ($("input[value='Amount']").is(':checked')) {
      chartAmount();
    }
    if ($("input[value='Percent']").is(':checked')) {
      chartPercent();
    }
  }) < /script> < /body>