在點擊功能後切換表格中的複選框

我需要此功能才能在加載頁面後工作。錯誤是失蹤;在真正行上的語句錯誤之前。此外，當checkbox toggle-all被點擊爲「checked」時，我希望它將checkall中的類標記爲true，並且當再次單擊toggle-all複選框時，將表中所有已選中的框標記爲false。這似乎是正確的，但括號中的一些錯誤。在點擊功能後切換表格中的複選框

$(document).ready(function() { 
    $('#toggle-all, input:checkbox').click(
    function() { 
     $('#table, :checkbox').attr(':checked','checked').true); 
    },function(){ 
     $('#table :checkbox').attr(':checked').false); 
    } 
); 
}); 



<section id="main"> 
    <form id="task-list"> <input id="toggle-all" name="toggle-all" type="checkbox" /> 
     </form> 
</section> 

<table class="table" > 
    <tr> 
     <td><input type="checkbox" class="checkall" />item.todo </td> 
     <td> item.name</td><td> 
    </tr> 
...... more rows 
</table>

來源

2012-11-13 samuk

把你的代碼放在jsfiddle.net上，我們很容易幫你。 –

只是供參考：你不能有兩個函數分配給點擊，第一個引用#table和複選框，另一方面它是#table中的複選框（加#table不存在，。表）。您應該使用prop而不是attr，並且不要使用「.false」或「.true」。總之，下面的工作解決方案。 –

簡單的解決方案：

$(document).ready(function() { 

    $("#toggle-all").click(function() { 
     $(".table input:checkbox").each(function() { 
      $(this).prop("checked", !$(this).prop("checked")); 
     }); 
    }); 

});

多一點防彈（總是切換所有的複選框一起）：

$(document).ready(function() { 

    $("#toggle-all").click(function() { 
     $(".table input:checkbox").prop("checked", $(this).prop("checked")); 
    }); 

});

演示：http://jsfiddle.net/Ck43Z/1/

來源

2012-11-13 10:20:49

當你使用attr（）和prop（）檢索輸入的狀態，attr（）指向它的默認狀態（如第e HTML），而prop（）指向它的當前狀態（如果你點擊它，它會改變，等等）。

當您使用它們設置新狀態時，它們會執行相同的操作;但是習慣使用prop（）來設置'checked'值是很好的。

$('#toggle-all').click(function() { 
    $('table input:checkbox').prop('checked', $(this).is(':checked')); 
});

這僅僅是速記書寫

$('#toggle-all').click(function() { 
    if ($(this).is(':checked')) { 
     $('table input:checkbox').prop('checked', true); 
    } else { 
     $('table input:checkbox').prop('checked', false); 
    } 
});

因爲，通過if語句，如果我們在第一個分支，表達式$（本）的性質。是（「：檢查「）無論如何都是真的，如果我們在第二個分支，它將是錯誤的。所以，在我們寫'true'和'false'的地方，我們可以在兩種情況下寫$（this）.is（「：checked」）。這樣做後，兩個分支都說完全一樣的東西，所以我們不再需要在if語句中編寫它們。

$（this）指被點擊的元素（即複選框）。如果你想參考jQuery中的事件，你可以這樣做：

$('.element').click(function(e) { 
    // the variable e now refers to the event 
});

來源

2012-11-15 09:10:56

在點擊功能後切換表格中的複選框

回答

相關問題