jquery checkbox не работает

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 
    } 
    ?> 

Этот код создал несколько флажков на странице просмотра. Первая проверка возвращает только значение после того, что следующий флажок щелчок не работает

$('#checkBoxMail').click(function(){ 

    alert("alert"); 
}); 

Answer 1

Вы используете тот же идентификатор для всех флажок creted, либо использовать уникальный идентификатор для каждого чекбокса или использования класса. Ниже кода, где я использовал класс

<?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 2

Там будет несколько флажков с таким же id, что неправильно. Попробуйте с class.

<input type="checkbox" name="checkBoxMail" class="checkBoxMail" 
value="<?php echo $query['id']; ?>" 
userid="<?php echo $query['suserid']; ?>"> 

И

$('.checkBoxMail').click(function(){ 
    alert("alert"); 
}); 

И если вы хотите получить доступ к значению атрибута или то просто делать -

$(this).val(); 
$(this).attr('userid'); 

Answer 3

Подари класс для всех и прочитать о делегированных обработчиков событий, которые помогли бы : http://api.jquery.com/on/

$(document).on("click",".classname",function(event){ 
    alert("hi"); 
}); 

Делегированные события имеют то преимущество, что они могут обрабатывать события от элементов-потомков, которые будут добавлены в документ позднее. По собиранию элемента, который гарантированно будет присутствовать во время прикреплён делегирован обработчик события, вы можете использовать делегированные события избежать необходимости часто подключать и отключать обработчик событий

Answer 4

Три примера того, как вы можете сделать это по ID:

Помните, что если вы создаете несколько полей флажков, не устанавливайте одинаковый идентификатор, укажите другой идентификатор для каждого из них или вы можете установить флажок по классу, изменив # на ., так как вы может использовать имя класса несколько раз.

Идентификатор должен быть уникальным

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

$('#checkBoxMail').is(':checked'){ 
    alert("alert"); 
}); 

Попробуйте это. Наслаждайтесь!

Answer 6

$(document).ready(function() { 

    $('#checkBoxMail').click(function() { 

    alert("click event fired")}); 

}); 

<input type="checkbox" name="checkBoxMail" id="checkBoxMail" />