Question

我认为这很简单我有一个表，第一列是复选框我正在使用此代码使复选框检查所有其他复选框

$('.checkall').click(function () {
    $(this).parents('tbody:eq(0)').find(':checkbox').attr('checked', this.checked);
});

用于创建表的HTML / Jquery代码

 $("#menuarea").html('<a href="#!/home" id="gotohome"><div id="backmain" class="backbg">Back</div></a><div id="nav" class="backbgright">New Business Lead</div>'+
                        '<div id="dowithleads"></div>'+
                        '<table cellpadding="0" cellspacing="0" border="0" class="sortable paginated" id="manageleads">'+
'   <thead>'+
'       <tr>'+
'           <th class="small"><input type="checkbox" class="checkbox checkall" value="Yes"></th>'+
'           <th class="sort-alpha">Created Time</th>'+
'           <th class="sort-alpha">Company</th>'+
'           <th class="sort-alpha">Lead Name</th>'+
'           <th class="sort-alpha">Phone No.</th>'+
'           <th class="sort-alpha bigger">Email</th>'+
'           <th class="sort-alpha">Lead Owner</th>'+
'           <th class="sort-alpha last">Lead Status</th>'+
'       </tr>'+
'   </thead>'+
'   <tbody>'+
'       <tr>'+
'           <td class="small"><input type="checkbox" class="formbox"></td>'+
'           <td>Mozilla 1.6</td>'+
'           <td>Win 95+ / OSX.1+</td>'+
'           <td class="center">1.6</td>'+
'           <td class="center">A</td>'+
'           <td class="center bigger">A</td>'+
'           <td class="center">A</td>'+
'           <td class="center last">A</td>'+
'       </tr>'+
'       <tr>'+
'           <td class="small"><input type="checkbox" class="formbox"></td>'+
'           <td>Mozilla 1.2</td>'+
'           <td>Win 94+ / OSX.1+</td>'+
'           <td class="center">1.5</td>'+
'           <td class="center">D</td>'+
'           <td class="center bigger">A</td>'+
'           <td class="center">N</td>'+
'           <td class="center last">A</td>'+
'       </tr>'+
'</table>');

Answer 1

如果您使用的是jQuery 1.6.x，请使用.prop：

$('.checkall').click(function () {
    $(this).closest('table').find('input[type=checkbox]').prop('checked', this.checked);
});

另请注意，$(this).parents('tbody:eq(0)')未选择任何内容。您的.checkall不在tbody内。我将其更改为$(this).closest('table')。

Answer 2

我不知道你为什么要通过javascript追加那个庞大的html块，因为没有任何动态生成的数据。

但是它不起作用的原因是因为.checkall元素在页面加载时不可用，所以在你告诉它绑定click事件之后它会被添加。

您可以使用.live()

$('.checkall').live('click',function () {
    $(this).parents('tbody:eq(0)').find(':checkbox').attr('checked', this.checked);
});

您还应该关闭</tbody>

Answer 3

完全正常工作的代码，已经在其他两个发布的时候编写了代码，所以没有必要浪费它：）

$(document).ready(function()
{

$('.checkall').live('click', function () {
    checked = ($(this).attr('checked') == 'checked') ? 'true' : false;
    $(':checkbox').each(function(){ $(this).attr('checked', checked); });
});


$("#menuarea").html('<a href="#!/home" id="gotohome"><div id="backmain" class="backbg">Back</div></a><div id="nav" class="backbgright">New Business Lead</div>'+
                        '<div id="dowithleads"></div>'+
                        '<table cellpadding="0" cellspacing="0" border="0" class="sortable paginated" id="manageleads">'+
'   <thead>'+
'       <tr>'+
'           <th class="small"><input type="checkbox" class="checkbox checkall" value="Yes"></th>'+
'           <th class="sort-alpha">Created Time</th>'+
'           <th class="sort-alpha">Company</th>'+
'           <th class="sort-alpha">Lead Name</th>'+
'           <th class="sort-alpha">Phone No.</th>'+
'           <th class="sort-alpha bigger">Email</th>'+
'           <th class="sort-alpha">Lead Owner</th>'+
'           <th class="sort-alpha last">Lead Status</th>'+
'       </tr>'+
'   </thead>'+
'   <tbody>'+
'       <tr>'+
'           <td class="small"><input type="checkbox" class="formbox"></td>'+
'           <td>Mozilla 1.6</td>'+
'           <td>Win 95+ / OSX.1+</td>'+
'           <td class="center">1.6</td>'+
'           <td class="center">A</td>'+
'           <td class="center bigger">A</td>'+
'           <td class="center">A</td>'+
'           <td class="center last">A</td>'+
'       </tr>'+
'       <tr>'+
'           <td class="small"><input type="checkbox" class="formbox"></td>'+
'           <td>Mozilla 1.2</td>'+
'           <td>Win 94+ / OSX.1+</td>'+
'           <td class="center">1.5</td>'+
'           <td class="center">D</td>'+
'           <td class="center bigger">A</td>'+
'           <td class="center">N</td>'+
'           <td class="center last">A</td>'+
'       </tr>'+
'</table>');

});

jQuery检查所有复选框

3 个答案: