JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<p>You are providing feedback</p>
<form>
  <div id="question-1">
    <label for="question-1">Is this correct?</label>
    <input type="radio" value="yes" name="choice-1" />Yes
    <input type="radio" value="no" name="choice-1" />No
  </div>
  <div id="question-2">
    <label for="question-2">Another question</label>
    <input type="radio" value="yes" name="choice-2" />Yes
    <input type="radio" value="no" name="choice-2" />No
  </div>
  <div id="question-3">
    <label for="question-3">One more question</label>
    <input type="radio" value="yes" name="choice-3" />Yes
    <input type="radio" value="no" name="choice-3" />No
  </div>
  <textarea id="addl" placeholder="please provide additional feedback..." style="display:none;"></textarea>
  <br />
  <button>Send Feedback</button>
</form>

JavaScript

$(':radio').change(function() {

	console.log($(this).attr('name') + ' = ' + this.value)

  if ($(':radio:checked').length == 3) {
    var grp1 = $('[name="choice-1"]:checked').val();
    var grp2 = $('[name="choice-2"]:checked').val();
    var grp3 = $('[name="choice-3"]:checked').val();
    $('#addl').toggle(grp3 == 'no');
  }
})