之所以这么问是因为,使用 jquery 在网页上显示了一个列表,现在想实现列表行批量删除的功能,选择 select_all 后所有复选框都会被选上,如果其中一个框被取消选择,那么 select_all 则取消被选上。 js 代码
$("#select_all").change(function(){ $(".checkbox").prop('checked', $(this).prop("checked")); }); $('.checkbox').click(function(){ if($(this).prop("checked") == false){ $('#select_all').prop('checked', false); } });
列表头部是写在 html 里的
<table class="table"> <thead> <tr> <th scope="col"><input type="checkbox" id="select_all" /></th> <th scope="col">用户名</th> <th scope="col">登录时间</th> <th scope="col">全名</th> <th scope="col">操作</th> </tr> </thead> <tbody id='adminlist_tbody'></tbody> </table>
列表的 tbody 是用 jquery 加载的
$('#adminlist_tbody').html(data.adminlist_tbody); $('#pagination_link').html(data.pagination_link);
后端用的是 php 的 ci 框架
$tbody = ''; foreach($results as $result) { $tbody .= ' <tr> <td><input type="checkbox" class="checkbox" data-id="'.$result['id'].'" /></td> <td>'.$result['username'].'</td> <td>'.$result['logintime'].'</td> <td>'.$result['fullname'].'</td> <td> <a class="btn btn-primary" href="#">编辑</a> <a class="btn text-white bg-danger" href="#">删除</a> </td> </tr> '; } $data = array( 'pagination_link' => $this->pagination->create_links(), 'adminlist_tbody' => $tbody ); exit (json_encode($data));
列表成功后发现,tbody 中的内容不会显示在 html 源码中,导致
$('.checkbox').click(function(){ if($(this).prop("checked") == false){ $('#select_all').prop('checked', false); } });
无法运行生效。 请问这个问题有什么好的解决方法吗?
PS. php,js 新手
![]() | 1 ysc3839 2020-02-21 18:54:37 +08:00 via Android 不要在网页加载时设置事件,动态加载网页代码之后再设置事件。 |
![]() | 2 ysc3839 2020-02-21 18:56:08 +08:00 via Android 或者后端改成直接返回原始数据,前端 js 进行网页渲染,这样在渲染的时候可以直接设置事件。 |
3 ji39 2020-02-21 22:09:32 +08:00 via Android jquery |
4 ji39 2020-02-21 22:11:06 +08:00 via Android 使用 jquery on() |