JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<script src="http://rubentd.com/js/jquery.radios-to-slider.js"></script>
<link rel="stylesheet" href="http://rubentd.com/css/radios-to-slider.css">
<div id="optionsRadioGroup" class="radios">
    <input id="option1" name="options" type="radio" value="v1"/>
    <label for="option1">1
        <br/>year</label>
    <input id="option2" name="options" type="radio" value="v2"/>
    <label for="option2">2 years</label>
    <input id="option3" name="options" type="radio" value="v3"/>
    <label for="option3">3 years</label>
</div>
<div id="sizeRadioGroup" class="radios">
    <input id="large" name="size" type="radio" value="v4"/>
    <label for="large">large</label>
    <input id="medium" name="size" type="radio" value="v5"/>
    <label for="medium">medium</label>
    <input id="small" name="size" type="radio" value="v6"/>
    <label for="small">small</label>
</div>

JavaScript

$(document).ready(function () {
    $(".radios").radiosToSlider();
});

var makeIsRadioGroupChecked = function(selector) {
    var $radioGroup = $(selector);
    return function isRadioGroupChecked() {
        return $radioGroup.find(':checked').length > 0;
    };
};

var isOptionsChecked = makeIsRadioGroupChecked('#optionsRadioGroup');

var isSizeChecked = makeIsRadioGroupChecked('#sizeRadioGroup');

var areAllGroupsChecked = function() {
    return isOptionsChecked() && isSizeChecked();
};

var alertIfAllChecked = function() {
    console.log('alertIfAllChecked');
    if (areAllGroupsChecked()) {
        alert("all answered");
    }
};

$(":radio").change(alertIfAllChecked);