JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<h1>Form capturing the clicks!</h1>
    <hr>
    <form>
        <fieldset id="form-area">
            <legend>Car shoppe</legend>
              <label>Packages:</label>
            <div class="form-field">

                <input type="radio" id="Deluxe" name="option" value="deluxe">
                <label for="deluxe">Deluxe</label>
                <input type="radio" id="Plain" name="option" value="plain">
                <label for="plain">Plain</label>
                <input type="radio" id="Custom" name="option" value="custom">
                <label for="custom">Custom</label>

            </div>
                <div>Features:</div>
            <div class="form-field">

                <input type="checkbox" name="feature" id="neons" value="neon">
                <label for="neon">Neon</label>
                <input type="checkbox" name="feature" id="nitros" value="nitros">
                <label for="nitros">Nitros</label>
                <input type="checkbox" name="feature" id="Paint" value="paint">
                <label for="paint">Paint Job</label>

            </div>
        </fieldset>
    </form>

CSS

#form-area{
        width:420px;
        margin:0 auto;
        padding:10px;
    }
    .form-field{

        width:220px;

        height:100px;
    }
    .form-field label{

        width:150px;
        float:left;
        padding:0px;
        text-align:right;
        margin:0;
    }
    .form-field input{

        width:50px;
        padding:5px;
        float:right;

    }

JavaScript

$(document).ready(
            function(){
                $("input[name='option']").click(
                    function(event){
                        if($(this).val()=="deluxe"){
                            $("input[name='feature']").prop("checked",true);
                        }
                        else if($(this).val()=="plain"){
                            $("input[name='feature']").prop("checked",false);
                    }
                    }
                );
            }
        );