Get all checked

by dceast

HTML

<div class="options">
    <div id="checkbox-options" class="optionOne">
        <h2>Section Heading</h2>
        <input type="checkbox" name="oneA">option One A<br>
        <input type="checkbox" name="oneB">option One B<br>
        <input type="checkbox" name="oneC">option One C<br>
        <input type="checkbox" name="oneD">option One D<br>
    </div><!--optionOne-->

    <button type="button" id="showMe">Show Me</button>

</div><!--option-->

<div id="answers" class="answers">
    <div class="answerOne">
        <h2>Answer Heading</h2>
        <div id="oneA" class="oneA answer" name="oneA">
            <p>Content from one A</p>
        </div><!--oneA-->
        <div id="oneB" class="oneB answer" name="oneB">
            <p>Content from one B</p>
        </div><!--oneB-->
        <div id="oneC" class="oneC answer" name="oneC">
            <p>Content from one C</p>        
        </div><!--oneC-->
        <div id="oneD" class="oneD answer" name="oneD">
            <p>Content from one D</p>
        </div><!--oneD-->
    </div><!--answerOne-->
</div><!--answers-->

JavaScript

$(function() {
    var $answers = $('.answer', '#answers');
    var $showMe = $('#showMe');
    var $checkboxes = $('input', '#checkbox-options');

    // hide the answers    
    $answers.hide();
    
    $showMe.click(function() {
      

        var $checked = $checkboxes.filter(":checked");
        
        $.each($checked, function(index, value) { 
            var $answerToShow = $('#' + value.name);
            alert($answerToShow[0]);
            $answerToShow.show();
        });
   
    
    });
    
    
});