jquery checkbox click not working - php

Question

<?php
while($query=mysql_fetch_assoc($select)){
?>
<tr><td><input type="checkbox" name="checkBoxMail" id="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>"></td>
</tr>
<?php
}
?>
This code created multiple checkbox in view page. First check only return value after that next check box click is not working
$('#checkBoxMail').click(function(){
alert("alert");
});

Answer 1

There would be multiple checkboxes with same id which is wrong. Try with class.
<input type="checkbox" name="checkBoxMail" class="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>">
And
$('.checkBoxMail').click(function(){
alert("alert");
});
And if you want to access the value or attribute then simple do -
$(this).val();
$(this).attr('userid');

Answer 2

Three examples of how you can do this by ID:
Remember if you're creating multiple checkbox fields don't set the same ID, make a different ID for each one or you can select the checkbox by class by changing the # to . as you can use the classname multiple times.
The ID has to be unique
$(document).ready(function()
{
// By ID - ID has to be unique
$('#checkBoxMail').on("click", function()
{
alert("alert");
});
$('#checkBoxMail2').click(function()
{
alert("alert2");
});
$(document).on("click", "#checkBoxMail3", function()
{
alert("alert3");
});
// By classname
$('.checkBoxMail5').on("click", function()
{
alert("alert");
});
$('.checkBoxMail5').click(function()
{
alert("alert2");
});
$(document).on("click", ".checkBoxMail5", function()
{
alert("alert3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Divs with unique ID
<hr>
<div id="checkBoxMail">CLICK ME</div>
<div id="checkBoxMail2">CLICK ME</div>
<div id="checkBoxMail3">CLICK ME</div>
<br>
Div with classname
<hr>
<div class="checkBoxMail5">CLICK ME</div>

Answer 3

You are using same id for all checkbox creted, either use unique id for each checkbox or use class. See below code, where i have used class
<?php
while($query=mysql_fetch_assoc($select)){
?>
<tr><td><input type="checkbox" name="checkBoxMail" class="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>"></td>
</tr>
<?php
}
?>
jQuery:
$(document).on('click','.checkBoxMail', function(){
alert("alert");
});

Answer 4

Give class to all and Read about delegated event handlers , that would help: http://api.jquery.com/on/
$(document).on("click",".classname",function(event){
alert("hi");
});
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers

Answer 5

$(document).ready(function () {
$('#checkBoxMail').click(function () {
alert("click event fired")});
});
<input type="checkbox" name="checkBoxMail" id="checkBoxMail" />

Answer 6

$('#checkBoxMail').is(':checked'){
alert("alert");
});
Try this. Enjoy!