CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
sridhar
sridhar

Reputation: 1389

Checking which checkbox was checked

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?

Upvotes: 0

Views: 62

Answers (3)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$('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>

Upvotes: 1

ferhado
ferhado

Reputation: 2594

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>

Upvotes: 0

Aomin&#233;
Aomin&#233;

Reputation: 500

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

        }
    }

Upvotes: 0

Related Questions