如果選中復選框，則條件 Javascript

Question

我有一個簡單的checkbox ，並試圖確定它是否在 JS 中被選中。

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == 'true'){
    console.log('test');
}

我的第一個console.log()按預期返回true或false ，但是即使它永遠不會進入if()語句，即使它是true 。

我錯過了什么？

Answer 1

要檢查是否選中了復選框，您無需針對"true" （字符串）對其進行測試。 相反，您檢查其checked屬性以查看是否為true （布爾值）。 這變得更容易處理，因為if條件總是首先測試“真實”值，因此您實際上不需要添加您正在測試true 。

var checkbox = document.getElementById('checkbox');
// Interpreted as "Is it true that checkbox.checked == true"?
if(checkbox.checked){
    console.log('test');
}

var checkbox = document.getElementById('checkbox').checked;
// Interpreted as "Is checkbox.checked.checked true?", which is 
// an error because the checkbox.checked property doesn't have
// a checked property and so checkbox.checked.checked will return
// undefined, which will be false when converted to a Boolean
if(checkbox.checked){
    console.log('test');
}

---

但是，不需要檢查是否選中了復選框。 只需查詢文檔中僅選中的復選框，返回的內容就是您使用的內容。

.querySelector()和.querySelectorAll()允許您將任何有效的 CSS 選擇器傳遞給它們。 .querySelector()將返回與選擇器匹配的第一個元素，而.querySelectorAll()將返回所有匹配元素的節點列表（HTML 集合）。

 document.querySelector("button").addEventListener("click", function(){ // Query for only the checked checkboxes and put the result in an array let checked = document.querySelectorAll("input[type='checkbox']:checked"); console.clear(); // Loop over the array and inspect contents checked.forEach(function(cb){ console.log(cb.value); }); });

 <input type="checkbox" value="one"> One <input type="checkbox" value="two"> Two <input type="checkbox" value="three"> Three <input type="checkbox" value="four"> Four <button>Get Checked Checkboxes</button>

Answer 2

讓我們看看你的代碼：

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == 'true'){
    console.log('test');
}

您將復選框名稱賦予一個持有布爾值的變量

改成

var checkbox = document.getElementById('checkbox');

您正在將布爾值與字符串進行比較

true == 'true'

總是false的。 改成

if (checkbox.checked) {
    console.log('test');
}

您正在使用復選框的 id

您可能有幾個具有相同id的復選框。 如果是這種情況，請將其更改為一個class並使用

document.getElementsByClassName

反而。 你會得到一個數組，你必須用一個循環來迭代它。

Answer 3

您正在嘗試將布爾值與字符串進行比較。 您想要的是根據需要將 bool 與 bool 進行比較。

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == true){
    console.log('test');
}

Answer 4

條件必須等於不帶引號的true ，否則將其與字符串進行比較。

Answer 5

您正在嘗試檢查布爾變量是否等於字符串“true”只需檢查

if(checkbox) {...}

Answer 6

從 true 周圍刪除引號。

if(checkbox === true){
    console.log('test');
}

更好的是（更簡潔）：

if(checkbox){
    console.log('test');
}

Answer 7

這與 ' true 'true'不同。 嘗試執行console.log(true == 'true') ，它會給出false ，因為第一個是布爾值（true 或 false），而第二個是字符串值（ 'any kind of text' ）。

因此，要正確檢查布爾值，您應該這樣做：

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox == true){
    console.log('The checkbox is true');
}

甚至你可以這樣做：

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox){
    console.log('The checkbox is true');
}

因為checkbox已經是一個布爾值，它將與if()語句一起使用。 這就像做true == true （即true ）和false == true （即false ），你正在做一個冗余代碼。

Answer 8

請在您的 IF 條件中刪除 true 周圍的單引號。 如果您添加引號，它會將其作為字符串。

嘗試這個：

如果（復選框 == 真）{ ... }

這應該有效。

Answer 9

我不確定發生了什么，但是當我有if(checkbox == true)時，我收到消息說true is not defined ，就好像它正在尋找一個名為true的變量。

我將其更改為使用 Jquery 像這樣if($("#checkbox").is(':checked'))