JSFiddle - React, Tailwind, and code Playground

by Rahsheen Porter

HTML

<div id="checkBoxGroup">
  Red:
  <input id="chkRed" name="chkRed" type="checkbox" value="Red" class="checkbox">
  <input id="txtRed" name="txt1" type="text" value="" />
  <br/> Blue:
  <input id="chkBlue" name="chkBlue" type="checkbox" value="Blue" class="checkbox">
  <input id="txtBlue" name="txt2" type="text" value="" />
  <br/> Green:
  <input id="chkGreen" name="chkGreen" type="checkbox" value="Green" class="checkbox">
  <input id="txtGreen" name="txt3" type="text" value="" />
  <br/> Indigo:
  <input id="chkIndigo" name="chkIndigo" type="checkbox" value="Indigo" class="checkbox">
  <input id="txtIndigo" name="txt4" type="text" value="" />
  <br/>
</div>

JavaScript

$('#checkBoxGroup .checkbox').click(function() {

  // Save clicked checkboxes current state
  checkedState = $(this).attr('checked');
  
  // Clear all checkboxes
  $(this).parent('div').children('.checkbox:checked').each(function() {
    $(this).attr('checked', false);
  });
  
  // Clear all textboxes
  $(this).parent('div').children('input:text').each(function() {
    $(this).attr('value', "");
  });
  
  // Restore the clicked checkboxes original state
  $(this).attr('checked', checkedState);
  
  var textbox = document.getElementById("txt"+$(this).attr('value'));
  textbox.value = $(this).attr('value');
});