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

会有多个具有相同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 2

有关如何通过ID执行此操作的三个示例：

请注意，如果您要创建多个复选框字段，请不要设置相同的ID，为每个字段设置不同的ID，或者您可以通过将#更改为{{按类选择复选框1}}因为你可以多次使用classname。

ID必须是唯一的

＆＃13;

$(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");
  });
});

＆＃13;

Answer 3

您对所有复选框都使用相同的ID，要么为每个复选框使用唯一ID，要么使用类。请参阅下面的代码，我使用了类

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

为所有人提供课程并阅读委派的事件处理程序，这将有所帮助：http://api.jquery.com/on/

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

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序

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" />

jquery复选框单击无法正常工作

6 个答案: