CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Derrick Rose
Derrick Rose

Reputation: 674

How to only have one checkbox checked at a time?

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'

Upvotes: 4

Views: 17931

Answers (7)

Raghavendra Rao
Raghavendra Rao

Reputation: 1

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

Upvotes: 0

pmate
pmate

Reputation: 181

Here 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.com/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

Upvotes: 1

Dexygen
Dexygen

Reputation: 12561

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.com/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);" />No

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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" />No

Upvotes: 3

felipsmartins
felipsmartins

Reputation: 13549

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

Upvotes: 1

Matthew Eskolin
Matthew Eskolin

Reputation: 658

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

Upvotes: 4

lucas
lucas

Reputation: 4685

Just 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.com/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

Upvotes: 2

Related Questions