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

$("input:radio[name='charttype']").change(function(){
	if($(this).val() == "percent"){
		alert('1');
	}	
	else if($(this).val() == "amount"){
		alert('2');
	}
});