JSFiddle - React, Tailwind, and code Playground

by Siva Charan

HTML

<fieldset id="checkboxArray">
            <legend>ASU Resources</legend>
            <label><input type="checkbox" name="rescheck[]"value="Career Preparation" />Career Preparation</label> 
            <label><input type="checkbox" name="rescheck[]" value="College Advising" />College Advising</label> 
            <label><input type="checkbox" name="rescheck[]"value="Counseling Services" />Counseling Services</label>
            <label><input type="checkbox" name="rescheck[]" value="Financial Aid" /> Financial Aid </label>
            <label><input type="checkbox" name="rescheck[]"value="Fitness &amp; Recreation" /> Fitness & Recreation </label> 
            <label><input type="checkbox" name="rescheck[]" value="Health Services" /> Health Services </label> 
            <label><input type="checkbox" name="rescheck[]"value="Housing" /> Housing </label>
            <label><input type="checkbox"name="rescheck[]" value="Library" /> Library </label>
            <label><input type="checkbox" name="rescheck[]" value="Parking" /> Parking </label> 
            <label><input type="checkbox" name="rescheck[]" value="Scholarships" /> Scholarships </label>
            <label><input type="checkbox" name="rescheck[]" value="Student Employment" /> Student Employment </label>
            <label><input type="checkbox" name="rescheck[]" value="Student Organizations" /> Student Organizations </label> 
            <label><input type="checkbox" name="rescheck[]" value="Tutoring Support" /> Tutoring Support </label>
            <label><input type="checkbox" name="rescheck[]" value="Writing Support" /> Writing Support </label>
        </fieldset>

        <!-- Here we display the resources selected.
     One way (well the only way I know how) is to Toggle visibility of DIVs based on selection. 
     The toggle is done within jQuery, here is the HTML side of it.
     Maybe not the best practice but it works, I never did take any classes on any of this :) -->

        <div...

JavaScript

$('.resource').hide();
$('input[type="checkbox"]').click(function() {
    $("input[name^='rescheck']").each(function() {
        if ($(this).is(":checked"))
            $('div[resource-label="'+this.value+'"]').show();
        else
            $('div[resource-label="'+this.value+'"]').hide();
    });
});