3

so I have a module popup window with a div. In it are several checkboxes, what I want to do is after the user has finished checking or unchecking the boxes he wants and clicks the done button. I want jQuery to dump all the selected values into an arrray.

Originally I just added whatever was checked into an Array, but then I had problems with trying to remove the checked item from the Array if the user decided to uncheck it. Doing it the other way above seems to be the similar method.

I created a Codepen here.

My jQuery

$('.select-roles').click(function(){
    var selectedRole = $(this).html();

    var selectedArray = new Array();

    $('roleId input:checked').each(function() {
        selectedArray.push($(this).val());
        console.log($(this).val());
    });

    console.log('modalName = '+modalName);
    console.log('selected array contains: '+selectedArray);
});

// displays the value of the checked checkbox in the console
$('input[type=checkbox]').click(function() {

    if($(this).is(':checked')){
        console.log( $(this).val())
    }
});

HTML

<div id="modal-TV">

        <div class="modal-top">
            <div class="modal-title">Actor: Select one or more genres below</div>

        </div>

        <div class="modal-choices">
            <div class="modal-col-1">
                <ul>
                    <li><input type="checkbox" value="Adult Animated">Adult Animated</li>
                    <li><input type="checkbox" value="Anime">Anime</li>
                    <li><input type="checkbox" value="Award Shows">Award Shows</li>
                    <li><input type="checkbox" value="Behind The Scenes">Behind The Scenes</li>
                    <li><input type="checkbox" value="Christian">Christian</li>
                </ul>
            </div>

            <!-- modal-choices -->

        <div class="modal-dashes"></div>
        <div class="modal-buttons">
            <ul>
                <a class="close" title="Cancel"><li>Cancel</li></a>
                <li class="select-roles">Done</li>
            </ul>
        </div>
    </div>
    <!-- modal-TV -->
Luke Shaheen
  • 4,262
  • 12
  • 52
  • 82
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • 1
    You need to save your CodePen using the "Save" button on the top (near their logo) then give us that link. Right now you just link to CodePen's main site. Also, you can use jQuery in CodePen; click on the wrench icon (settings icon) on the JS bar, and select a Library. Something like this: http://codepen.io/anon/pen/HethI – Luke Shaheen Apr 03 '13 at 18:55
  • Saved! thanks http://codepen.io/leongaban/pen/aJiut though I just figured it out... my variable containing my id for some reason was not working to point to the div, so I removed it and just used: $('input:checked') also just found this http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery – Leon Gaban Apr 03 '13 at 18:56

1 Answers1

4

try this script 

     $(function () {
        function dumpInArray(){
           var arr = [];
           $('.modal-choices input[type="checkbox"]:checked').each(function(){
              arr.push($(this).val());
           });
           return arr; 
        }

        $('.select-roles').click(function () {
           dumpInArray();
        });
     });

it, upon click of "Done", selects all checked checkboxes in .select-roles and returns their values in an array

Ejaz
  • 8,719
  • 3
  • 34
  • 49