JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<h3>Checks</h3>

<input name="choices" type="checkbox" value="something1" />Option 1
<br />
<input name="choices" type="checkbox" value="something2" />Option 2
<br />
<input name="choices" type="checkbox" value="something3" />Option 3
<br />
<input name="choices" type="checkbox" value="something4" />Option 4
<br />
<br />

<h3>Radios</h3>

<input type="radio" class="rad" name="None" value="--" />None
<br />
<input type="radio" class="rad" name="Item1" value="Item1" />Item1
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Item2
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Item3
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Item4
<br />
<input type="button" id="button" value="Click" />
<br />

JavaScript

$(document).ready(function () {
    $("#button").click(function () {
        //Check boxes
        $("input:checkbox[name=choices]:checked").each(function() {
            console.log("Checkbox: " + $(this).val());
        });
        
        // Radios
        $(".rad:checked").each(function() {
            console.log("Radio: " + $(this).val());
        });
    });
    
    $(".rad[name=None]").click(function() {
        $(".rad").removeAttr("checked");
    });
})