I want to figure out how to only have one checkbox checked at a time, I wish to do it with a function, and without radios as that's not the style I am trying to go for.
My code is as follows :
function check(c01)
{
if((this).is(":checked") == true)
{
c02 = false;
}
}<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(c01);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(c02);" />No'I want to figure out how to only have one checkbox checked at a time, I wish to do it with a function, and without radios as that's not the style I am trying to go for.
My code is as follows :
function check(c01)
{
if((this).is(":checked") == true)
{
c02 = false;
}
}<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(c01);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(c02);" />No'- 5 Use radiobox instead, and you can customize it using CSS – Adam Azad Commented Aug 6, 2016 at 15:58
-
I would pass
thisfrom the function:onclick="check(this);"– Alan Wells Commented Aug 6, 2016 at 16:12 - It looks like there is a way to style radio buttons as check boxes with CSS if you want to try that alternative also. Search "Format a radio button as a checkbox" – Alan Wells Commented Aug 6, 2016 at 16:18
- I agree with first ment, If it's just about style use radion button with checkbox style, check my answer below. – Zakaria Acharki Commented Aug 6, 2016 at 16:30
7 Answers
Reset to default 4Here is an example without JQuery. Add a class to your inputs.When Clicked, uncheck everything, and then check the clicked input if it was not checked.
function check(input)
{
var checkboxes = document.getElementsByClassName("radioCheck");
for(var i = 0; i < checkboxes.length; i++)
{
//uncheck all
if(checkboxes[i].checked == true)
{
checkboxes[i].checked = false;
}
}
//set checked of clicked object
if(input.checked == true)
{
input.checked = false;
}
else
{
input.checked = true;
}
}<input type="checkbox" class="radioCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="radioCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No'That what exactly radio buttons made for, if it's just about style use radio buttons with checkbox style, so you don't need to add extra js code, check the example below.
Hope this helps.
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}<input type="radio" name="creditCheck" id="c01" value="Yes" checked/>Yes
<input type="radio" name="creditCheck" id="c02" value="No" />NoJust a working example, feel free to refine the solution:
$("#c01").click(function(){
if($("#c01").is(':checked'))
$("#c02").prop("checked", false);
});
$("#c02").click(function(){
if($("#c02").is(':checked'))
$("#c01").prop("checked", false);
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />NoIf I did understand it well:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<input type="checkbox" name="creditCheck" value="Yes" />Yes
<input type="checkbox" name="creditCheck" value="No" />No
<script type="text/javascript">
function getCheckboxes() {
return document.querySelectorAll('input[type=checkbox]');
}
function uncheckAllCheckboxes() {
var checkboxes = getCheckboxes();
for (var i = 0, length = checkboxes.length; i < length; i++) {
checkboxes[i].checked = false;
}
}
function manageClick() {
uncheckAllCheckboxes();
this.checked = true;
}
function init() {
var checkboxes = getCheckboxes();
for (var i = 0, length = checkboxes.length; i < length; i++) {
checkboxes[i].addEventListener('click', manageClick);
}
}
init();
</script>
</body>
</html>For your very simple use case where there are just two checkboxes to toggle between, I would do it as follows:
function check(checkbox)
{
var uncheck = checkbox.id === 'c01' ? 'c02' : 'c01';
$('#' + uncheck).prop('checked', false);
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(this);" />NoHere is another example on how you can do this:
$('input[name="creditCheck"]').on('click', function(e) {
$('input[name="creditCheck"]').prop('checked', false);
$(this).prop('checked', true);
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<input type="checkbox" name="creditCheck" value="Yes" />Yes
<input type="checkbox" name="creditCheck" value="No" />No
<script type="text/javascript">
function getCheckboxes() {
return document.querySelectorAll('input[type=checkbox]');
}
function uncheckAllCheckboxes() {
var checkboxes = getCheckboxes();
for (var i = 0, length = checkboxes.length; i < length; i++) {
checkboxes[i].checked = false;
}
}
function manageClick() {
uncheckAllCheckboxes();
this.checked = true;
}
function init() {
var checkboxes = getCheckboxes();
for (var i = 0, length = checkboxes.length; i < length; i++) {
checkboxes[i].addEventListener('click', manageClick);
}
}
init();
</script>
</body>
</html>i want to use this code and i also want to be able to uncheck the checked check box.