JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<div id=test>
<input type=radio name=bar value=Black> Black
<input type=radio name=bar value=White> White
<input type=radio name=bar value=Red> Red

<input type=checkbox name=baz[] value=Black> Black
<input type=checkbox name=baz[] value=White > White
<input type=checkbox name=baz[] value=Red> Red    
    
    </div>
    
    <p></p>
     <select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>

JavaScript

function displayValues() {     
 //$('input:checkbox:checked').val(); 
//$('input:radio[name=bar]:checked').val();     
var radioValues = $('input:radio[name=bar]:checked').val();
var checkValues = $("#multiple").val() || [];
//checkValues.join(", "));
}
//$("#test").change(displayValues);
//displayValues();

function displayVals() {
var singleValues = $("input:radio[name=bar]:checked").val();
var multipleValues = $("input:checkbox[name=baz]:checked").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("#test").change(displayVals);
displayVals();