CODEWITHSUNDEEP
javascripthtmlcheckbox
Lin
Lin

Reputation: 151

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

How to automatically uncheck a checkbox with javascript if a user checks another one? I have this script:

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

if a user checks SSH but he also tries to check VPN then a javascript code will automatically uncheck SSH and leave VPN checked and the otherwise. How can I do that with javascript? Basically I just want one checkbox checked instead of two. Please don't ask me why I use checkbox instead of other methods, I will have to rewrite the whole script if I use other methods and I don't have enough time to do that.

Upvotes: 3

Views: 1995

Answers (3)

Ema.jar
Ema.jar

Reputation: 2424

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

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

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.

Upvotes: 0

Braj
Braj

Reputation: 46841

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>

Upvotes: 3

Related Questions