Checkbox (iswitch) in html table with multiple rows

Question

This is the HTML code (a part of the table code):

<td class="center">
    <?php if ($row['datum_afhaling']) { ?>
            <input class="active iswitch iswitch-success" type="checkbox" cdid="<?php echo $row['cdid']; ?>" value="<?php echo $row['id']; ?>" checked></td>
        <?php } else { ?>
            <input class="active iswitch iswitch-success" type="checkbox" cdid="<?php echo $row['cdid']; ?>" value="<?php echo $row['id']; ?>"></td>
    <?php } ?>
</td>

And the javascript code:

$("input.active").click(function() {

    var check_active = $(this).is(':checked') ? 'ja' : 'nee';
    var check_id = $(this).attr('value');
    var cd_id = $(this).attr('cdid');

    $.ajax({
        type: "POST",
        url: "cudi-afhalen-status-ajax.php",
        data: {id: check_id, active: check_active, cdid: cd_id},
        success: function(){

            alert ('id: '+check_id+' & active: '+check_active+' & cdid: '+cd_id);
            location.href='cudi-bestellingen-overzicht.php';
        }
    });
    return true;
});

If I switch the checkbox to the other side I create a alertbox with some params. That works great so far, but the code gives me 15 alertboxen after each other because I have 15 rows in my table. The values (params) in all alertboxes are the same. I switch 1 checkbox-iswitch so I will have just 1 alertbox with the params and not all 14 other boxes. I don't know why it is happen?

EDIT I found what is going wrong with the code here. The javascript code was inside my while loop. So i replaced it outside my loop and everything goes fine.

Answer 1

Try below code

$("input.active").click(function() {

var check_active = $(this).is(':checked') ? 'ja' : 'nee';
var check_id = $(this).attr('value');
var cd_id = $(this).attr('cdid');
var al = 1;
$.ajax({
    type: "POST",
    url: "cudi-afhalen-status-ajax.php",
    data: {id: check_id, active: check_active, cdid: cd_id},
    success: function(){
        if(al==1){
        alert ('id: '+check_id+' & active: '+check_active+' & cdid: '+cd_id);
         al=0;
         }

          location.href='cudi-bestellingen-overzicht.php';
    }
});
return true;
});