JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div>
    <input type="radio" name="radio" class="radioBtn" value="showAll" checked="checked" /> Show All 
    <input type="radio" name="radio" class="radioBtn" value="isSelect" /> Selected 
    <input type="radio" name="radio" class="radioBtn" value="noSelect" /> Not Selected 
</div>
<br /><br />
<div><input type="checkbox" name="meh1" class="check_box" /> Meh1</div>
<div><input type="checkbox" name="meh2" class="check_box" /> Meh2</div>
<div><input type="checkbox" name="meh3" class="check_box" /> Meh3</div>
<div><input type="checkbox" name="meh4" class="check_box" /> Meh4</div>
<div><input type="checkbox" name="meh5" class="check_box" /> Meh5</div>
<div><input type="checkbox" name="meh6" class="check_box" /> Meh6</div>
<div><input type="checkbox" name="meh7" class="check_box" /> Meh7</div>

CSS

div {
    width: 100%;
}

JavaScript

$('.radioBtn').change(function() {
    var chosen = $(this).val(); 
    update_selection(chosen);
});

$('.check_box').click(function() {
    var chosen = $('.radioBtn:checked').val();
    update_selection(chosen);
});

function update_selection(radioSelect) {
    $('.check_box').each(function() {
        if (radioSelect == "showAll") {
            $(this).parent().css({'display': 'block'})
        } else if (radioSelect == "isSelect") {
            if ($(this).is(':checked')) {
                $(this).parent().css({'display': 'block'})
            } else {
                $(this).parent().css({'display': 'none'})
            }
        } else if (radioSelect == "noSelect") {
            if ($(this).is(':checked')) {
                $(this).parent().css({'display': 'none'})
            } else {
                $(this).parent().css({'display': 'block'})
            }
        }
    }); 
}