How to automatically uncheck a checkbox with javascript if other is already checked?

It's better to use Radio buttons instead of check box if you need switchable functionality.

It still you want to use check box then here is the code using JQuery as per your needs.

• Simply adds change listener on each check box and change the 'checked' property of others.

<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>

This is how you should do it, on each checkbox change test if it's checked then uncheck all the others.

In the following snippet I am also testing the case where you have more than two checkboxes:

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

It behaves exactly like radio buttons, but of course using radio buttons will be much easier and simple.

I've created a solution based on Javascript (no jQuery).

This is the javascript code:

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;
            }
        }
    }

}

Using this approach you can add other checkboxes and obtain the same result if these checkboxes have different names.

This is my 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
               ...

NOTE: I've tested this code on

• Chrome version: 44.0.2403.107
• Firefox version: 39.0