JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <legend>I have 3 pairs of radio buttons named "gender[]" in my form. I want to check the first value of each pair using jQuery. I was thinking that this would do the trick:</legend>
    <fieldset>
        <label for="gender[]">Group1:</label>
        <input type="radio" name="gender[]"/>
        <input type="radio" name="gender[]"/>
    </fieldset>
    <fieldset>
        <label for="gender[]">Group2:</label>
        <input type="radio" name="gender[]"/>
        <input type="radio" name="gender[]"/>
    </fieldset>
    <fieldset>
        <label for="gender[]">Group3:</label>
        <input type="radio" name="gender[]"/>
        <input type="radio" name="gender[]"/>
    </fieldset>
</form>
<ul class="report">
</ul>

CSS

ul {
    overflow:hidden;
    list-style:none;
}
li {
    display:inline-block;
    float:left;
    width:33.3333333%;
    border-bottom:1px #999 solid;
}

JavaScript

var $radios = $("input[type=radio]");
var checkInput = function(evt){
    $("form").find("fieldset").each(function(){
        var $this = $(this),
            $firstRadio = $this.find("input[type=radio]").eq(0);
        $( "<li>" + $firstRadio.is(":checked") + "</li>").appendTo(".report");
    });
}
$radios.on("change", checkInput);