Question

我有一个复选框列表，每个复选框都有相同的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>

Answer 1

使用J-query的ON功能。

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

如果您使用的jquery版本低于1.7，请使用live（）而不是on（）

Answer 2

您应该使用 .on() ：

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

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

Answer 4

对Jquery使用.on（）＆gt; = 1.7

在html

的头部添加此行

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

Answer 5

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

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

5 个答案: