Checking which checkbox was checked

Question

I am implementing Multiple select with checkboxes and jQuery as described at http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery

This is the example shown in the website:

<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>

The dropdown list with checkboxes is showing as expected. Please note that there are three such lists being displayed on one page. How to identify them individually?

The question is how do I determine using javascript which of the checkboxes under each of the lists have been selected. I also need to obtain the value of the selected item. Which of these have to tagged with an id?

Answer 1

 $('input[type="checkbox"]').on('change',function(){ $(this).closest('.multiselect').find('span').empty(); $(this).closest('.multiselect').find('input[type="checkbox"]:checked').each(function(){ $(this).closest('.multiselect').find('span').append($(this).val()+' | '); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="multiselect"> <label><input type="checkbox" name="option[]" value="1" />Green</label> <label><input type="checkbox" name="option[]" value="2" />Red</label> <label><input type="checkbox" name="option[]" value="3" />Blue</label> <label><input type="checkbox" name="option[]" value="4" />Orange</label> <label><input type="checkbox" name="option[]" value="5" />Purple</label> <label><input type="checkbox" name="option[]" value="6" />Black</label> <label><input type="checkbox" name="option[]" value="7" />White</label> <br> Checked values: <span></span> </div> <div class="multiselect"> <label><input type="checkbox" name="option[]" value="1" />Green</label> <label><input type="checkbox" name="option[]" value="2" />Red</label> <label><input type="checkbox" name="option[]" value="3" />Blue</label> <label><input type="checkbox" name="option[]" value="4" />Orange</label> <label><input type="checkbox" name="option[]" value="5" />Purple</label> <label><input type="checkbox" name="option[]" value="6" />Black</label> <label><input type="checkbox" name="option[]" value="7" />White</label> <br> Checked values: <span></span> </div> 

Answer 2

Here is an example which may help you:

 $(':checkbox').change(function(){ var liste2 = $(':checkbox:checked').map(function() { return this.value; }).get(); $('span').text(liste2); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="multiselect"> <label><input type="checkbox" name="option[]" value="1" />Green</label> <label><input type="checkbox" name="option[]" value="2" />Red</label> <label><input type="checkbox" name="option[]" value="3" />Blue</label> <label><input type="checkbox" name="option[]" value="4" />Orange</label> <label><input type="checkbox" name="option[]" value="5" />Purple</label> <label><input type="checkbox" name="option[]" value="6" />Black</label> <label><input type="checkbox" name="option[]" value="7" />White</label> <br> Checked values: <span></span> </div> 

Answer 3

you can try this below, it will display the value of each checkbox who is checked

    function check(){

        var e = document.getElementsByClassName('check-box');
        var total = e.length;

        for (var i=0; i<total; i++){

            if (total[i].checked){  alert(total[i].value); }
            // or alert(i); if you just need the index

        }
    }