如何通過點擊複選框，檢查所有複選框或它的文本

我有一個複選框，它將調用下面給出的jQuery函數來檢查所有的複選框中的頁面：如何通過點擊複選框，檢查所有複選框或它的文本

//to check all checkbox 
$(document).ready(function() { 
    $("#checkAll").click(function() { 
     $("input:checkbox").prop('checked', $(this).prop('checked')); 
    }); 
});

但我也想叫一樣的jQuery功能，當我點擊「全選」在下面的文本，但它不工作：

<input type="checkbox" id="checkAll" /> 
<a id="checkAll" onclick="document.getElementById('checkAll').checked=true" style="cursor:pointer"> Select All </a>

來源

2014-03-02 logan

您不需要點擊處理程序來更新複選框的「checked」屬性，它是自動的。另外，該複選框永遠不會被用戶取消選中（除非你有另一個腳本運行，那麼這是雙倍冗餘的）。 –

@DavidThomas注意到處理程序正在改變頁面中所有複選框的值，而不僅僅是他點擊的那個複選框。您對複選框的重新剔除（或取消選中）是正確的，但用戶確實無法翻轉它的值，否則... – Omer

更新時間：

ID不能在文檔中分配兩次！ ID是UniqueKey對於選擇一個元素，如果您想一次選擇兩個元素，則必須使用class！

<input type="checkbox" class="checkAll" /> 
<a class="checkAll" onclick="document.getElementsByClassName('checkAll')[0].checked=true" style="cursor:pointer"> Select All </a>

還是換種方式解決你的問題是使用Label標籤和包裝你進去，就像

<label> 
<input type="checkbox" class="checkAll" /> 
Select All 
</label>

來源

2014-03-02 15:35:40

我喜歡第二個 – logan

你不能把兩個元素與在相同的id同一頁。 Ids被認爲是獨一無二的。

此外，你正在做一個奇怪的混合jQuery代碼和內聯事件處理程序。試試這個：

<input type="checkbox" id="checkAll" class="checkAll"/> 
    <a class="checkAll" style="cursor:pointer"> Select All </a>

的javascript：

//to check all checkbox 
$(document).ready(function() { 
    $(".checkAll").click(function() { 
     var checkbox = $('#checkAll'); 
     if (this.id !== 'checkAll') checkbox.prop('checked', true); 
     var checked = checkbox.prop('checked'); 
     $("input:checkbox").prop('checked', checked); 
    }); 
});

來源

2014-03-02 15:37:34

一旦你從<a>刪除重複id和內聯JS，你可以使用jQuery像

$(document).ready(function() { 
    $("#checkAll, #checkAll + a").click(function(){ 
    var checked = $("#checkAll").prop('checked'); 
    if(this.id=="checkAll") 
     $(":checkbox").prop('checked', checked); 
    else 
     $(":checkbox").prop('checked', !checked); 
    }); 
});

來源

2014-03-02 15:37:49

在HTML中，它是非法的給出兩個不同的元素相同的ID。提供標籤用不同的ID比輸入標籤：

<input type="checkbox" id="checkAll" /> 
<a id="btnCheckAll" onclick="document.getElementById('checkAll').checked=true" style="cursor:pointer"> Select All </a>

然後你就可以改變jQuery代碼弄成這個樣子：

//to check all checkbox 
$(document).ready(function() { 
    $("#checkAll #btnCheckAll").click(function() { 
     $("input:checkbox").prop('checked', $(this).prop('checked')); 
    }); 
});

順便說一句 - 它似乎並不喜歡這個代碼打算總是檢查所有複選框，而是翻轉它們的值。

來源

2014-03-02 15:39:53 Omer

如何通過點擊複選框，檢查所有複選框或它的文本

回答

相關問題