JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<input type="checkbox" id="walking" onclick="run()" />Walking
<input type="checkbox" id="male" onclick="run()" />Male
<input type="checkbox" id="female" onclick="run()" />Female
<input type="checkbox" id="standing" onclick="run()" />Standing

<div class="male walking" style="display:none">male walking</div>
<div class="male standing"style="display:none">male standing</div>
<div class="standing female"style="display:none">female standing</div>
<div class="female walking"style="display:none">female walking</div>
<!--
<div class="male female standing"style="display:none">male+female standing</div>
-->

JavaScript

function run() {
    $("div").hide();
    choice = "";
    $(":checked").each(function() {
       choice += "." + this.id;
    });
    if (choice) 
        $("div" + choice).show();
};