如何使用 jQuery 選中/選擇複選框 - JavaScript

在這個簡短的指南中，您將學習如何選擇頁面上的複選框元素，並在 JavaScript、Vanilla JavaScript 和 jQuery 中檢查它們。

我們將使用這個簡單的複選框設置：

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

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

element.checked =true

檢查或選擇複選框的最簡單方法是顯式設置 checked true 的字段 ：

// Get Element
checkBox = document.getElementById('takenBefore');
// Set the `checked` field to `true`
checkBox.checked = true

為了演示這一點，讓我們將一個事件偵聽器附加到一個按鈕，然後它以編程方式為我們選擇/檢查復選框。這是一個良性示例，但它確實起到了作用 - 您將根據 some 檢查/選擇複選框 用戶的操作：

document.getElementById('button').addEventListener('click', event => {
	checkBox = document.getElementById('takenBefore');
	checkBox.checked = true
});

這導致：

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

注意： jQuery 是一個流行的 JavaScript 庫，存在於許多中 世界各地的項目。由於其輕量級和擴展 JavaScript 內置功能範圍的特性 - 它已成為主食 .

我們可以使用 jQuery 的選擇語法而不是純 JavaScript 的語法來簡化元素的選擇以及附加到導致複選框被選中的其他元素的事件偵聽器。如果您的項目中已經有 jQuery，那麼它最終會得到更簡單的代碼，但是，如果這是 all 您需要這樣做，可能不值得為此導入庫。

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

現在，安裝了 jQuery - 您可以輕鬆地設置 checked true 的屬性 和以前一樣，但語法更簡單：

$('#takenBefore')[0].checked = true

在這裡，我們得到一個 jQuery 對象，而不是帶有選擇器的底層元素，因此，我們必須對其下標並獲取底層對像以訪問 checked [0] 的屬性 .

同理，如果我們想基於其他一些動作來觸發這段代碼，比如按下按鈕：

$('#button').on('click', function() {
	$('#takenBefore')[0].checked = true
});

這種語法比我們以前使用的語法要簡單得多，但在功能上是等效的：

免費電子書：Git Essentials

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

這種方法的缺點是 - 它是 原始的 .我們只是使用了更簡單的選擇語法，但最終只是將屬性顯式設置為 true 在那之後。還有另一種設置屬性的方法，但更隱式。

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

prop() 函數接受一組鍵值參數——我們想要訪問的屬性的名稱和我們想要分配給它的值。該方法本身執行當我們將屬性顯式設置為 true 時未執行的驗證 和以前一樣。

話雖如此，將復選框設置為選中/選中很簡單：

$('#takenBefore').prop('checked', true);

再說一次，因為它通常是在其他一些事件上觸發的：

$('#button').on('click', function() {
	$('#takenBefore').prop('checked', true);
});

$('#element').attr("checked", true)

在舊版本的 jQuery 中，由於項目限制，您可能會被迫使用 prop() 函數前面有 attr() 函數，設置元素的屬性。

在這種情況下，它的工作方式與 prop() 大致相同 ：

$('#takenBefore').attr('checked', true);

再說一次，因為它通常是在其他一些事件上觸發的：

$('#button').on('click', function() {
	$('#takenBefore').attr('checked', true);
});

結論

在這個簡短的指南中，我們了解瞭如何使用 Vanilla JavaScript 和 jQuery 將復選框設置為“選中”/選中。

我們已經了解了最簡單的方法，例如顯式設置屬性，並逐步使用 jQuery 的包裝方法進行驗證。