<?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");
});
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');
.click will work in this case.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>
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");
});
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
$(document).ready(function () {
$('#checkBoxMail').click(function () {
alert("click event fired")});
});
<input type="checkbox" name="checkBoxMail" id="checkBoxMail" />
$('#checkBoxMail').is(':checked'){
alert("alert");
});
Try this. Enjoy!
delegateeventbinding.$('#checkBoxMail').clicknot works on dynamically createdhtml. Have to do$(document).on('click','.checkBoxMail', function(){ });