如果已經選中了其他復選框，如何使用javascript自動取消選中復選框？

Question

如果用戶檢查另一個復選框，如何使用javascript自動取消選中復選框？ 我有這個腳本：

<input type="checkbox" name="use_ssh" value="yes">SSH
<input type="checkbox" name="use_vpn" value="yes">VPN

如果用戶檢查SSH但他也嘗試檢查VPN那么javascript代碼將自動取消選中SSH並保持VPN檢查，否則。 我怎么能用javascript做到這一點？ 基本上我只想檢查一個復選框而不是兩個。 請不要問我為什么使用復選框而不是其他方法，如果我使用其他方法並且沒有足夠的時間來完成，我將不得不重寫整個腳本。

Answer 1

如果需要可切換功能，最好使用單選按鈕而不是復選框。

它仍然要使用復選框，然后這里是根據您的需要使用JQuery的代碼。

• 只需在每個復選框上添加更改偵聽器，並更改其他復選框的“已檢查”屬性。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="use_ssh" value="yes">SSH <input type="checkbox" name="use_vpn" value="yes">VPN <script> var ssh = $('input[name="use_ssh"]'); var vpn = $('input[name="use_vpn"]'); ssh.change(function(){vpn.prop('checked',false);}); vpn.change(function(){ssh.prop('checked',false);}); </script> 

Answer 2

這是你應該怎么做的，如果檢查了每個復選框更改測試，則取消選中所有其他復選框。

在下面的代碼片段中， 我還測試了您有兩個以上復選框的情況：

 var checkboxes = $('input[type="checkbox"]'); console.log(checkboxes); checkboxes.each(function() { $(this).change(function() { console.dir($(this)[0].checked); if ($(this)[0].checked) { var current = $(this)[0]; checkboxes.each(function(elem) { if ($(this)[0] !== current) { $(this)[0].checked = false; } }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="use_ssh" value="yes" checked>SSH <input type="checkbox" name="use_vpn" value="yes">VPN <input type="checkbox" name="cc" value="yes">Test1 <input type="checkbox" name="vv" value="yes">Test2 

它的行為與單選按鈕完全相同，但當然使用單選按鈕會更容易和簡單 。

Answer 3

我已經創建了一個基於Javascript（沒有jQuery）的解決方案。

這是javascript代碼：

window.onload =  function(){ 

    var checkBoxes = document.querySelectorAll("input[type=checkbox]");

    for(var i = 0 ; i < checkBoxes.length ; i++){
        checkBoxes[i].addEventListener("change", checkUncheck, false);
    }

    function checkUncheck(){        
        for(var i = 0 ; i < checkBoxes.length ; i++){
            if(this.name !== checkBoxes[i].name && checkBoxes[i].checked){
                checkBoxes[i].checked = false;
            }
        }
    }

}

使用此方法，您可以添加其他復選框，並在這些復選框具有不同名稱時獲得相同的結果。

這是我的HTML：

<input type="checkbox" name="use_ssh" value="yes">SSH
<input type="checkbox" name="use_vpn" value="yes">VPN
<input type="checkbox" name="use_abb" value="yes">ABB
<input type="checkbox" name="use_bcc" value="yes">BCC
               ...

注意：我已經測試了這段代碼

• Chrome版本：44.0.2403.107
• Firefox版本：39.0