I have two checkboxes, each handling a vertical and horizontal state respectively. It is ok if both are off, but if one is on the other must be off and most importantly both can not be on.
I do not want to jQuery here.
If I both are unchecked and I hit the horizontal one and then the vertical, they will toggle, as the horizontal goes unchecked and the vertical will bee checked.
But if I do it the other way starting with the vertical, I can't check the horizontal.
Full code is on github and demo running on gh-pages.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle</title>
</head>
<style>
.constraint {
color: #007bff;
padding: 0rem .5rem;
}
span.horz:before {
content: "\2194";
}
span.vert:before {
content: "\2195";
}
</style>
<body>
<span class="constraint">Constraint: </span>
<span class="constraint vert">
<input type="checkbox" id="vertical" onchange="constraints()">
<span class="constraint horz"></span>
<input type="checkbox" id="horizontal" onchange="constraints()">
</body>
<script type="text/javascript">
function constraints() {
inputVert = document.getElementById("vertical");
inputHorz = document.getElementById("horizontal");
console.log("initially: vert:" + inputVert.checked);
console.log("initially: horz:" + inputHorz.checked);
if (inputVert.checked) {
console.log("vert clicked -> vert:" + inputVert.checked);
console.log("vert clicked -> horz:" + inputHorz.checked);
// inputHorz = document.getElementById("horizontal");
inputHorz.checked = false;
// inputVert.checked = true;
};
if (inputHorz.checked) {
console.log("horz clicked -> vert:" + inputVert.checked);
console.log("horz clicked -> horz:" + inputHorz.checked);
// inputVert = document.getElementById("vertical");
inputVert.checked = false;
// inputHorz.checked = true;
};
}
</script>
</html>I have two checkboxes, each handling a vertical and horizontal state respectively. It is ok if both are off, but if one is on the other must be off and most importantly both can not be on.
I do not want to jQuery here.
If I both are unchecked and I hit the horizontal one and then the vertical, they will toggle, as the horizontal goes unchecked and the vertical will bee checked.
But if I do it the other way starting with the vertical, I can't check the horizontal.
Full code is on github and demo running on gh-pages.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle</title>
</head>
<style>
.constraint {
color: #007bff;
padding: 0rem .5rem;
}
span.horz:before {
content: "\2194";
}
span.vert:before {
content: "\2195";
}
</style>
<body>
<span class="constraint">Constraint: </span>
<span class="constraint vert">
<input type="checkbox" id="vertical" onchange="constraints()">
<span class="constraint horz"></span>
<input type="checkbox" id="horizontal" onchange="constraints()">
</body>
<script type="text/javascript">
function constraints() {
inputVert = document.getElementById("vertical");
inputHorz = document.getElementById("horizontal");
console.log("initially: vert:" + inputVert.checked);
console.log("initially: horz:" + inputHorz.checked);
if (inputVert.checked) {
console.log("vert clicked -> vert:" + inputVert.checked);
console.log("vert clicked -> horz:" + inputHorz.checked);
// inputHorz = document.getElementById("horizontal");
inputHorz.checked = false;
// inputVert.checked = true;
};
if (inputHorz.checked) {
console.log("horz clicked -> vert:" + inputVert.checked);
console.log("horz clicked -> horz:" + inputHorz.checked);
// inputVert = document.getElementById("vertical");
inputVert.checked = false;
// inputHorz.checked = true;
};
}
</script>
</html>Any help greatly appreciated,
Thanks
Share Improve this question edited Sep 14, 2017 at 15:03 ofey asked Sep 14, 2017 at 14:14 ofeyofey 3,36710 gold badges50 silver badges93 bronze badges3 Answers
Reset to default 2With JQuery you can do it like this, hope this help you
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle</title>
</head>
<style>
.constraint {
color: #007bff;
padding: 0rem .5rem;
}
span.horz:before {
content: "\2194";
}
span.vert:before {
content: "\2195";
}
</style>
<body>
<span class="constraint">Constraint: </span>
<span class="constraint vert">
<input type="checkbox" id="vertical">
<span class="constraint horz"></span>
<input type="checkbox" id="horizontal">
</body>
<script type="text/javascript">
$('#vertical').change(function() {
if($(this).is(":checked")){
$('#horizontal').attr('checked', false);
}
});
$('#horizontal').change(function() {
if($(this).is(":checked")){
$('#vertical').attr('checked', false);
}
});
</script>
</html>Use radio buttons
This is a classic scenario for using an input radio. It only allows for one to be selected at a time:
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="fav_language" value="HTML"> HTML <br>
<input type="radio" name="fav_language" value="CSS"> CSS<br>
<input type="radio" name="fav_language" value="JavaScript"> JavaScript
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it bees checked, and all other radio-buttons with equal name bee unchecked.</p>
</body>
</html>As you can see, it allows for none to be check initially, but once one is checked, you cannot go back to the none-checked state. You add another button or control that resets it to the initial none-checked state, or have another radio button labelled none appear the moment something is selected.
Based on @Leonardo's answer, you can further simplify it to the following:
$('#vertical').on("change", function() {
$('#horizontal').attr('checked', !$(this).is(":checked"));
});
$('#horizontal').on("change", function() {
$('#vertical').attr('checked', !$(this).is(":checked"));
});