JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div>
<form onchange="selectedOptions(this)">
    <label><input type="checkbox" value="option1">option 1</label>
    <label><input type="checkbox" value="option2">option 2</label>
    <label><input type="checkbox" value="option3">option 3</label>
</form>
</div>
<div>
<input name="custom_type" type="text" />
</div>
<div>
<form onchange="selectedOptions(this)">
    <label><input type="checkbox" value="Buy and Hold">Buy and Hold</label>
    <label><input type="checkbox" value="Lease Option Deals">Lease Option Deals</label>
    <label><input type="checkbox" value="Refurb Flips">Refurb Flips</label>
</form>
</div>
<div>
<input name="custom_type" type="text" />
</div>

JavaScript

function selectedOptions(form) {
	var $inputs = $(form).find('input[type="checkbox"]:checked');
  var selectedOptionsOutputString = "";
  var $output = $(form).parent('div').parent('div').next('div').find('input[name="custom_type"]');
	
  for(i=0; i < $inputs.length;i++) {
  	
  	if (selectedOptionsOutputString == "") {
    	selectedOptionsOutputString = $($inputs[i]).val();
    } else {
    	selectedOptionsOutputString += ", " + $($inputs[i]).val();
    }
  }
  
  $output.attr('value', selectedOptionsOutputString);
}