javascript - unable to alert id of checked checkboxes correctly -

php&html

<?php  $param=$_get['param'];  $sql= "select * categories,main_category categories.main_cat_id=main_category.main_cat_id , categories.main_cat_id='$param'";  $stmt = $pdo->query($sql);  ?>                <table class="small-12 medium-12 large-12 medium-centered large-centered columns pop_tbl"><tr>               <?php               $i=0;               while($row = $stmt->fetch(pdo::fetch_assoc))               {                   $i++;                   //echo $i;                ?>              <td>              <label for="level_<?php echo $row['catid'];?>">               <input type="checkbox" class="level" id="level_<?php echo $row['catid'];?>" value="<?php echo $row['catid'];?>" onchange="searchcourse('<?php echo $row['catid'];?>')">              <span></span>               <?php echo $row['catname'];?>                </label>              </td>                <?php               if($i==2)                   {                       echo"</tr><tr>";                       $i=0;                   }               }               ?>         </tr></table> 

script

function searchcourse(param) {$("input[type=checkbox][id^=level]").change(function() {      if($(this).is(":checked")) {    alert($(this).attr("id"));   } else {    alert("not checked");   }   }); } 

the scenario is, when checkbox checked call searchcourse function made. expect function recognize if checkbox clicked or not , after alert id of checked checkbox. is, when first checkbox in array checked, alerts nothing!

when uncheck it, alerts 'not checked'. second checkbox in array, straight away says checked when checked , 'not checked' when unchecked.

apart issue, alert suppose appear once per event change. remembers how many times checkboxes clicked , mnay times pops up. instance, first checkbox first checked shown nothing. uncheked it,(2 times altready). alert shown twice. when check , uncheck second checkbox (now 4 times already). alerts appear 4 times!

why so? please explain.

you've bound event twice, first this

<input type="checkbox" onchange="searchcourse()" /> 

and do

function searchcourse(param) {      $("input[type=checkbox][id^=level]").change(function() {            // stuff      }); } 

so everytime change event fires, searchcourse function fires, , binds new event handler, , keeps multplying, 2 times, 4 times, 8 times etc.

just remove onclick handler in html , function together, keep jquery event handler only