JavaScript >> Javascript 文檔 >  >> jQuery

如何在 jQuery 和 JavaScript 中檢查復選框是否被選中

複選框是我們非常常用的幾種輸入字段類型之一,它允許用戶與網頁交互並通常通過 檢查 將數據發佈到後端 適用於特定情況的任何框。

與單選按鈕相反(屬於 單選組 ) - 屬於單個組的複選框不互斥 因此用戶可以選擇多個框 適用。在檢查是否選擇了任何選項時,您應該記住這一點。

element.checked

讓我們從一個簡單的 Checkbox 設置開始:

<h1>Check if Checkbox is Checked</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore" placeholder="Yes">
<label for="takenBefore">Yes</label>

<button id="button"> Check Checkbox </button>

在純 JavaScript 中 - 檢查 Checkbox 是否被選中就像訪問 checked 一樣簡單 字段,用布爾值表示:

// Get relevant element
checkBox = document.getElementById('takenBefore');
// Check if the element is selected/checked
if(checkBox.checked) {
    // Respond to the result
    alert("Checkbox checked!");
}

但是,此代碼只有在您專門運行它時才會運行。例如,您可以在用戶提交表單或希望進入下一頁作為驗證步驟時運行它。驗證通常不以這種方式完成,通常委託給更健壯的庫。更常見的是,您希望對複選框做出反應以更改頁面上的某些內容 - 例如提供 other 輸入選項。

在這些情況下,您需要添加一個事件監聽器 到按鈕,讓它監聽事件,例如被點擊 .當這樣的事件發生時——你可以決定對事件做出響應:

checkBox = document.getElementById('takenBefore').addEventListener('click', event => {
	if(event.target.checked) {
		alert("Checkbox checked!");
	}
});

在這個設置中 - 代碼一直在等待並監聽元素上的事件!現在只要有人點擊 複選框,您的 alert() 方法將執行。但是,這一次要獲取 checkBox 元素,我們從 event 採購它 例如,作為 target 那個事件。

當您在瀏覽器中打開頁面並單擊按鈕時,您會看到:

$('#element')[0].checked

注意: jQuery 是一個流行的 JavaScript 庫,存在於許多中 世界各地的項目。由於其輕量級和擴展 JavaScript 內置功能範圍的特性 - 它已成為主食 .毫不奇怪 - 它可以用來檢查復選框是否被選中。

我們可以使用 jQuery 的選擇語法代替純 JavaScript 來簡化元素的選擇和附加到它的事件監聽器。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

要檢查 Checkbox 是否已被選中,在 jQuery 中,您可以簡單地選擇元素,獲取其底層對象,而不是 jQuery 對象([0] ) 並使用內置的 checked 屬性:

let isChecked = $('#takenBefore')[0].checked
console.log(isChecked);

在這裡,我們將測試 takenBefore 複選框被選中,通過 jQuery 的選擇器訪問它,並使用固有的 checked 字段和以前一樣。

或者,您可以定義一個檢測更改的偵聽器:

$('#takenBefore').change(function() {
	alert('Checkbox checked!');
});

這段代碼要簡單得多,但執行方式與純 JS 解決方案大致相同!點擊複選框會像以前一樣觸發警報:

$('#element').is(':checked'))

而不是通過內置的 checked 檢查 屬性 - 我們可以將邏輯卸載到 is() 方法。 is() 方法是一種通用方法,可用於多種用途 - 並返回 true /false 基於比較標準。 :checked 選擇器專門用於檢查單選按鈕或複選框元素是否已被選中。

所以,如果你把這些結合在一起,很容易檢查一個複選框 is(':checked')

let isChecked = $('#takenBefore').is(':checked');
console.log(isChecked); // true (if checked at the time)

$('#element').prop("checked")

在早期版本的 jQuery - attr() 用於訪問和操作元素的字段。在較新的版本中,該方法被替換為 prop() .它可以作為元素屬性的 getter/setter,在我們的例子中 - 作為獲取 checked 的包裝器 元素的屬性。

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

let isChecked = $('#takenBefore').prop('checked');
console.log(isChecked); // true (if checked at the time)

is()prop() ?

從我們的角度來看,這兩種方法的工作方式似乎大致相同。那麼,有什麼區別呢?

is()prop() 有更多的處理和解析開銷 .即使考慮到 prop()只是 訪問該屬性並執行一些 驗證,在處理大量輸入(例如,在循環中)時,它的性能更高。

另一方面 - is() 總是返回一個 boolean 值,而 prop() 只返回基礎屬性的類型。你不能保證有別的東西潛入,如果你不使用 prop() 你的代碼可能會在運行時失敗 適當地。 is()語義上表示 返回值 - boolean ,這使它成為一個更具可讀性的選項。

結論

在這個簡短的指南中,我們已經了解瞭如何使用 JavaScript 和 jQuery 檢查復選框是否被選中。

我們使用了 checked 屬性 - 直接和間接,後跟 is()prop() 方法,并快速瀏覽一下您可能更喜歡哪種方法。


Tutorial JavaScript 教程
  1. 9 個使用本地存儲的 JavaScript 庫

  2. Intersection Observer API:您需要它!

  3. 創建與使用 VWC

  4. 4 個備受關注的有用 Web 開發工具

  5. 如何將簡單的表單提交轉換為 ajax 調用;

  6. Mongodb 向嵌套對象插入動態唯一鍵,如果不存在則添加,否則更新

  7. 作為一名開發人員,我從 3 次失敗的面試中得到的教訓

  1. 如何獲取存儲在變量中的元素內部的特定元素?

  2. Nodejs中使用dotenv管理環境變量

  3. # javascript中的模板文字

  4. 雅虎的 NoScript 兼容性拯救了我的夢幻足球隊

  5. JavaScript 中的單色抖動(Bayer、Atkinson、Floyd–Steinberg)

  6. 如何使用 AWS S3 將 SPA 部署為靜態網站

  7. TailwindCSS 入門

  1. 使用 Webpack Bundle Analyzer 分析 JavaScript Bundle

  2. SQL GROUP BY 使用 JavaScript

  3. 將變量值與數組的索引匹配以獲取月份

  4. 使用 Node-RED 和 TensorFlow.js 開發機器學習 IoT 應用程序