JSFiddle - React, Tailwind, and code Playground

by vikaskbh

HTML

<div id="form">
    <div class="radio">
        <input type="checkbox" id="coloropt1" name="color" value="red" />
        <label for="coloropt1">Red</label>
    </div>
    <div class="radio">
        <input type="checkbox" id="coloropt2" name="color" value="green" />
        <label for="coloropt2">Green</label>
    </div>
    <div class="radio">
        <input type="checkbox" id="coloropt3" name="color" value="blue" />
        <label for="coloropt3">Blue</label>
    </div>
    <hr>
    <input type="button" id="red_btn" value="Is Red Checked?" class="btn btn-danger">
    <input type="button" id="green_btn" value="Is Green Checked?" class="btn btn-success">
    <input type="button" id="blue_btn" value="Is Blue Checked?" class="btn btn-primary">
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 #form {
    margin:0 auto;
    width: 80%;
}
#coloropt1+label {
    color:red;
    font-weight:bold;
    padding-left: 5px;
}
#coloropt2+label {
    color:green;
    font-weight:bold;
    padding-left: 5px;
}
#coloropt3+label {
    color:blue;
    font-weight:bold;
    padding-left: 5px;
}

JavaScript

jQuery.fn.isChecked = function () {
        if ("prop" in jQuery(this)) {
            return jQuery(this).prop('checked') == true ? true : false;

        }
        if ("attr" in jQuery(this)) {
            return jQuery(this).attr('checked') == true ? true : false;
        }
        return jQuery(this).is(":checked") == true ? true : false;
    };

    jQuery(document).ready(function () {

        $('#red_btn').click(function () {
            if ($('#coloropt1').isChecked()) {
                alert("Yes");
            } else {
                alert("No");
            }
        });

        $('#green_btn').click(function () {
            if ($('#coloropt2').isChecked()) {
                alert("Yes");
            } else {
                alert("No");
            }
        });

        $('#blue_btn').click(function () {
            if ($('#coloropt3').isChecked()) {
                alert("Yes");
            } else {
                alert("No");
            }
        });
    });