How do I automatically uncheck a javascript checkbox if another is already checked?
How can I automatically uncheck a checkbox from javascript if the user checks another? I have this script:
<input type="checkbox" name="use_ssh" value="yes">SSH
<input type="checkbox" name="use_vpn" value="yes">VPN
if the user checks SSH
, but he also tries to check VPN
, then the javascript code will automatically uncheck SSH
and leave VPN
, otherwise. How can I do this using javascript? Basically, I just want one checkbox to be checked instead of two. Please don't ask me why I am using a 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 it.
source to share
Better to use Radio buttons instead of a checkbox if you need switchable functionality.
You still want to use a checkbox, but here's the code with JQuery as per your need.
<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>
source to share
This is how you should do it, each time you check for a change to a checkbox, if 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 the same as radio buttons, but of course using the radio button will be much easier and easier .
source to share
I created a Javascript based solution (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 get 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 have tested this code for
- Chrome version: 44.0.2403.107
- Firefox version: 39.0
source to share