すべてのチェックボックスのチェックを外す

Question

checkAllのクリック機能は機能しますが、uncheckAllのクリック機能は機能しません。チェックされているすべてのチェックボックスのチェックを外すのを妨げるものは誰にも見えます。

$('#checkAll').click(function (e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').attr('checked','checked'); 
    $(this).removeAttr('id').attr('id','uncheckAll'); 
    $(this).find('strong').html('Uncheck All Checkboxes'); 
}); 

$('#uncheckAll').click(function (e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').removeAttr("checked"); 
    $(this).removeAttr('id').attr('id','checkAll'); 
    $(this).find('strong').html('Check All Checkboxes'); 
}); 

EDIT：

私はそれが何もしない何らかの理由がこれを試してみました。理由は分かりません。

$('#dataTablePageList').delegate('#checkAll', 'click', function(e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').attr('checked',true); 
    $(this).removeAttr('id').attr('id','uncheckAll'); 
    $(this).find('strong').html('Uncheck All Checkboxes'); 
}); 

$('#dataTablePageList').delegate('#uncheckAll', 'click', function(e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').attr('checked',false); 
    $(this).removeAttr('id').attr('id','checkAll'); 
    $(this).find('strong').html('Check All Checkboxes'); 
}); 

編集3：

$('#viewAll').live('click', function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(-1); 
    $(this).removeClass('viewAll').addClass('paginateRecords'); 
    $(this).find('strong').html('View Paginated Records'); 
    $('.pagination').hide(); 
}); 

$('#paginateRecords').live('click', function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(10); 
    $(this).removeClass('paginateRecords').addClass('viewAll'); 
    $(this).find('strong').html('View All Records'); 
    $('.pagination').show();   
}); 

Answer 1

イベントclickすべてのCSS-試合だけなので、最初の実行時に、今-またはイン・将来、DOM要素にないバインドされます。

はちょうどこのような何かを持っています#checkAllがバインドされることになる、後者は別の方法を試してみてくださいすべての

で使用されない - チェック要素にトグルを使用して

EDIT3用として

：あなたが退治されているので

$('#viewAll').toggle(function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(-1); 
    $(this).find('strong').html('View Paginated Records'); 
    $('.pagination').hide(); 
}, function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(10); 
    $(this).find('strong').html('View All Records'); 
    $('.pagination').show();   
}); 

toggle()テイク交互に、後続のクリックした後に実行されている2つの関数をパラメータとしては

Answer 2

あなたの問題はここです：

$('#uncheckAll').click(function (e) { ... 

あなたにコールバック関数を結合している：

$(this).removeAttr('id').attr('id','uncheckAll'); 

あなたはこれが言う

idの要素はです .clickをと呼ぶとき、 idを変更すると、既にバインドされているコールバックは変更されません。次の2つの別々のボタンを使用し、必要に応じてそれらを表示/非表示あなたの clickイベントまたは（より良い私見）を結合するための liveまたは delegateを使用するように切り替えることができます：

Answer 3

このシンプルなラインは、すべてのチェックボックスをオフにする必要があります

$('#dataTablePageList :checkbox').attr('checked',false); 

とこれは、すべてをチェックします：

$('#dataTablePageList :checkbox').attr('checked',true); 

私はあなたが望むものを達成するために、「checkAll/uncheckAll」要素のidを変更する理由は表示されません。

<input type='checkbox' id='toggleAll' onclick="toggleAll(this);" /> 

function toggleAll(element){ 

    $('#dataTablePageList :checkbox').attr('checked',element.checked); 
} 

Look at this quick example.

Answer 4

、代わりにクリック（）の）（ライブ使用してみてください/アクションをバインドしたIDをリセットすると、live（）がうまく動作する可能性があります。