如何使用 CLASS 而不是 ID 处理使用 jQuery 的复选框更改？答案

【问题标题】：How to handle change of checkbox using jQuery using CLASS not ID?如何使用 CLASS 而不是 ID 处理使用 jQuery 的复选框更改？
【发布时间】：2014-01-31 09:18:57
【问题描述】：

我有一个复选框列表，每个复选框都有相同的class。如何使用 jquery 来检测复选框的 click 或 change 事件？我需要这个，以便加载数据并为单击的复选框显示模式。

<div class="widget widget-4" style="float:left;padding:10px;">
                <div class="widget-head">
                    <h4 class="heading">Alert to Delivery Methods</h4>
                </div>
                <div style="clear:both;"></div>
                <div class="widget-body">
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <?php
                            foreach($model->model_alert_2_delivery_methods as $key => $alert) {                       ?>
                                <tr>
                                    <td>
                                        <?php
                                        echo $form->checkBox($alert, 'name', array(
                                            'name' => 'AlertDeliveryMethods[' . ($alert->id) . ']',
                                            'class' => 'modal__package_create_popup_alert_delivery_methods',)
                                        );
                                        ?>
                                    </td>                            
                                    <td>
                                        <?php
                                        echo $alert->name;
                                        ?>
                                    </td>
                                </tr>
                                <?php
                            }
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>

<script>
    $(document).ready(function() {
        $('.modal_package_create_alert_delivery_methods').change(
                function() {
                    console.log('evrika');
                }
        );
    }
    );
</script>

【问题讨论】：

有一个双 _ ；在我的电脑上没有看到那个； 10x 人

标签： javascript php jquery twitter-bootstrap yii

【解决方案1】：

使用 J-query 的 ON 功能。

$('.modal_package_create_alert_delivery_methods').on('change',
            function() {
                console.log('evrika');
            }
    );

如果你使用的 jquery 版本低于 1.7，请使用 live() 而不是 on()

【讨论】：

【解决方案2】：

您应该使用 .on()：

 $(document).on('change','.modal_package_create_alert_delivery_methods',function(){
     console.log('evrika');
 })

【讨论】：

【解决方案3】：

试试这个代码

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".mm").on("change",function(){
    alert(this.value);
  });
});
</script>
</head>
<body>

<input type='checkbox' class='mm' value='1'>
<input type='checkbox' class='mm'  value='1'>
<input type='checkbox' class='mm'  value='1'>

</body>
</html>

【讨论】：

【解决方案4】：

对 Jquery 使用 .on()>=1.7

在html的head部分添加这一行

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

然后在页面末尾添加此编码

  <script type="text/javascript" > 
$(document.body).on('change','.modal__package_create_popup_alert_delivery_methods',function(){
   //do something here 
    });

</script>

【讨论】：

【解决方案5】：

$('.modal_package_create_alert_delivery_methods').on('change',function(){
  if($(this).is(":checked")){
    console.log($(this).val());
    //show the corresponding data
  }
})

【讨论】：