JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Question  </h1>

<p>What is the best color to wear after dark?</p>
<form>
    <label>
        <input type="checkbox" name="q4" class="grey"></input>grey</label>
    <label>
        <input type="checkbox" name="q4" class="black"></input>black</label>
    <label>
        <input type="checkbox" name="q4" class="white"></input>white</label>
    <label>
        <input type="checkbox" name="q4" class="red"></input>red</label>
    <label>
        <input type="checkbox" name="q4" id="correct"></input>reflective yellow</label>
    <br />
    <button class="submit4">Submit</button>
</form>

JavaScript

$(function () {
    //variable of correct answers	
    var rules = ['correct'];

    //force checkboxes to work like radio buttons
    var boxes = $("input[name=q4]:checkbox").click(function () {
        boxes.not(this).attr('checked', false);
    });



    $('.submit4').click(function (e) {
        e.preventDefault();
        //check correct answers from var above
        var result;
        switch($('input[name=q4]:checked').attr('class')){
            case 'grey': 
                result = "it's grey";
                break;
            case 'black':
                result = "it's black";
                break;
            case 'white':
                result = "it's white";
                break;
            case 'red':
                result = "it's red";
                break;
            default:
                result = 'Correct answer!';
                break;
        }
        alert(result);

    });
});