取消勾選另一個按鈕選中的複選框的點擊

Question

我想選中的複選框要在點擊另一個按鈕，不選中：

下面是HTML

<input type="checkbox" name="checkb" id="Agent" value="Agent"> type=Agent 
<br /> 

    <input type="checkbox" name="checkb" id="Customer" value="Customer"> type=Customer 
<br /> 

    <input type="checkbox" name="checkb" id="Phone" value="Phone"> type=Phone 
<br /> 

    <input type="checkbox" name="checkb" id="ID_Card" value="ID_Card"> type=ID_Card 
<br /> 

<input type=datetime id="Start_Date" value="" placeholder="Start_Date" /> 
<input type=datetime id="End_Date" value="" placeholder="End_Date" /> 
<button id="date"> 
    Interval 
</button> 

在Interva升的點擊按鈕，如果任何複選框被選中，他們應該被取消選中。

下面是爲間隔按鈕事件偵聽器：

  var check1 = document.getElementById("Agent"); 
var check2 = document.getElementById("Customer"); 
var check3 = document.getElementById("Phone"); 
var check4 = document.getElementById("ID_Card"); 


var newBtn = document.getElementById("date"); 
if (newBtn) { 
    newBtn.addEventListener("click", function() { 

    if (check1.checked) { 
     var ischecked1 = check1.checked; 

     check1.checked != ischecked1; 
    } 
    if (check2.checked) { 
     var ischecked2 = check2.checked; 

     check2.checked != ischecked2; 

    } 

    if (check3.checked) { 
     var ischecked3 = check3.checked; 

     check3.checked != ischecked3; 
    } 
    if (check4.checked) { 
     var ischecked4 = check4.checked; 

     check4.checked != ischecked4; 

    } 
    }); 
} 

下面的代碼運行沒有任何錯誤，但如果它們被選中的複選框不要聽之任之。

下面是fiddle

Answer 1

您的語句只是評估爲布爾值，不進行分配：

check1.checked != ischecked1; // this returns a boolean, doesn't do any assignment 

你想這樣做來切換選中狀態：

check1.checked = !ischecked1; 

同其他複選框的東西。

但也沒有必要創建額外的變量，你可以做翻轉，直接讀取：

check1.checked = !check1.checked; 

你既然他們被檢查時會只切換複選框，你可以直接將它們設置爲false。

if (check1.checked) check1.checked = false; 

而不必if語句中，你可以使用數組反覆做反覆：

[check1, check2, check3, check4].forEach(check => { 
    if (check.checked) { 
    check.checked = false; 
    } 
}); 

// or query the checkboxes directly and do the same 
[...document.querySelectorAll('input[type="checkbox"]')].forEach(check => { 
    if (check.checked) { 
    check.checked = false; 
    } 
}); 

Answer 2

通過它的外觀，你只是想按鈕

的點擊

你取消一切可以做到這一點

var newBtn = document.getElementById("date"); 
if (newBtn) { 
    newBtn.addEventListener("click", function() { 
     document.getElementById("Agent").checked = 
     document.getElementById("Customer").checked = 
     document.getElementById("Phone").checked = 
     document.getElementById("ID_Card").checked = false; 
    }); 
} 

Answer 3

你的錯誤是在這一行：

check1.checked != ischecked1; 

這實際上意味着「比較如果check1.checked不等於ischecked1」。

最簡單的辦法是if語句，只是這樣做是爲了去除：

check1.checked = !check1.checked 

這意味着「設置check1.checked到check1.checked相反」。

由於所有複選框都具有相同的名稱，您還可以通過請求名稱並使用循環遍歷它們來收集所有複選框。一個小例子：

// Collect all checkboxes with a CSS selector that matches all input 
// elements with a name attribute that's equal to "checkb" 
var checkboxes = document.querySelectorAll('input[name="checkb"]'); 

var newBtn = document.getElementById("date"); 
if (newBtn) { 
    newBtn.addEventListener("click", function() { 
    // this is a for loop, it will run for as long as i 
    // is smaller than the amount of found checkboxes (checkboxes.length) 
    for(var i = 0; i < checkboxes.length; i++) { 
     // Get the checkbox from the checkboxes collection 
     // collection[i] means get item from collection with index i 
     var checkbox = checkboxes[i]; 

     // Revert the .checked property of the checkbox 
     checkbox.checked = !checkbox.checked; 
    } 
    }); 
}