首頁 > web前端 > js教程 > 如何使用 JavaScript 切換複選框狀態?

如何使用 JavaScript 切換複選框狀態?

Susan Sarandon
發布: 2024-11-12 12:28:02
原創
1010 人瀏覽過

How to Toggle Checkbox State with JavaScript?

如何使用JavaScript 實作複選框切換功能

為了動態管理複選框的選取狀態,JavaScript 提供了高效的解決方案。讓我們探索各種方法:

使用原生 JavaScript 進行切換

使用 document.getElementById("checkbox") 使用其 ID 存取複選框。若要選取該框,請將其選取屬性設為 true。相反,要取消選取它,請將屬性設為 false。

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;
登入後複製

使用 jQuery 切換(版本 1.6 )

使用 jQuery 1.6 及更高版本, prop 方法提供修改複選框狀態的便捷方法。若要選取該框,請使用 $().prop("checked", true)。若要取消選取它,請使用 $().prop("checked", false)。

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);
登入後複製

使用jQuery 切換(1.5 及以下版本)

早期版本jQuery 版本(1.5 及以下),使用attr 方法來控制複選框狀態。語法與 prop 方法中的相同。

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);
登入後複製

透過利用這些方法,您可以根據使用者互動或 JavaScript 程式碼中的程式邏輯無縫控制複選框的選取狀態。

以上是如何使用 JavaScript 切換複選框狀態?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板