JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<div id="demo">
  <h3>I'm interested in</h3>
  <label class="solo"><input type="radio" name="example1" value="private"><span></span>
    <span class="label-icon"><i class="fas fa-users"></i> Solo/Private Lessons</span>
  </label>
  <label class="group"><input type="radio" name="example1" value="group"><span></span>
    <span class="label-icon"><i class="fas fa-users"></i> Group Lessons</span>
  </label>
    <label class="workshop"><input type="radio" name="example1" value="workshop"><span></span>
      <span class="label-icon"><i class="fas fa-guitar"></i> Workshops and Clinics</span>
    </label>

  <div class="conditional" data-cond-option="example1" data-cond-value="private">
    <h4>Which instruments are you interested in learning?</h4>
    <label><input type="checkbox" name="guitar" onClick="check(this)"><span></span> Guitar</label>
    <label><input type="checkbox" name="drums" onClick="check(this)"><span></span> Drums</label>
      <label><input type="checkbox" name="violin" onClick="check(this)"><span></span> Violin</label>
      <label><input type="checkbox" name="example3" onClick="check(this)"><span></span> Bass</label>
      <label><input type="checkbox" name="example3" onClick="check(this)"><span></span> Flute</label>
      <label><input type="checkbox" name="example3" onClick="check(this)"><span></span> Saxophone</label>
      <label><input type="checkbox" name="example3" onClick="check(this)"><span></span> Other</label>


      <div class="years-of-experience">
    <div class="conditional inline" data-cond-option="guitar" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in guitar</label>
    </div>
    <div class="conditional" data-cond-option="drums" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in drums</label>
    </div>
    <div class="conditional" data-cond-option="violin" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of...

JavaScript

function check(clickedObj)
{
  //Have you clicked checkbox checked or not?
  let checkboxState =$(clickedObj).prop( "checked" );
  //Find the container div and the find all containing checkboxes
  let checkboxes = $(clickedObj).parent().parent().find("input[type='checkbox']");
  //Loop through all foundend checkboxes and uncheck all
  $(checkboxes).each(function()
  {
    $(this).removeAttr("checked");
  })
  //Restore selected checkbox state in case you wanted to check it
  if (checkboxState == true) {
    $(clickedObj).prop("checked", true);
  }
}