Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 608
  • Last Modified:

mutually exclusive checkboxes (not radio buttons.)

Hi there, I need to create a form where there are 2 checkboxes, one says YES and the other says NO, and only one of them should be selectable at any one time. How can I achieve this? I know this works with radio buttons , but I'm not sure how it can be done by chekboxes instead?
0
eggster34
Asked:
eggster34
1 Solution
 
boboudreauCommented:
You'll need to add Javascript handlers to each checkbox.  If you're using something like jquery, this can be done like so:

<script type="text/javascript">
$("#checkbox1").click( function() { $("#checkbox2").attr("checked", false); } );
$("#checkbox2").click( function() {  $("#checkbox1").attr("checked", false); } );
</script>

<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">



Of course, if you don't have jquery, you'll have to use rudimentary standard JS + DOM:

var x = document.getElementById("checkbox1");
x.setAttribute("checked", false);

-OR-

<input type="checkbox" id="checkbox1" onclick="document.getElementById('checkbox2').setAttribute('checked', false)">

etc...
0
 
HainKurtSr. System AnalystCommented:
use radio button instead

<input type=radio name=rgOpt value="1"> A
<input type=radio name=rgOpt value="2"> B
0
 
13598Commented:
You could make your second checkbox checked value equal not the first checkbox checked value.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
HainKurtSr. System AnalystCommented:
if you insist on checkbox here it is
<input type=radio name=rgOpt value="1"> A
<input type=radio name=rgOpt value="2"> B

<hr>

<input type=checkbox id=chkA name=chkA value="1" onclick="chk(this)"> A
<input type=checkbox id=chkB name=chkB value="2" onclick="chk(this)"> B

<script>
function chk(c) {
  if (c.name == 'chkA') document.getElementById('chkB').checked = (!c.checked);
  if (c.name == 'chkB') document.getElementById('chkA').checked = (!c.checked);
}
</script>

Open in new window

0
 
jrtwigCommented:
Just use a simple javascript function triggered onClick of the checkbox to mimic a radio button.  Both checkboxes should have the same name but different id's.
function oneCheck(name,id)
{
     var y = document.getElementById(id);

     if (y.checked == true)
     {
						
          var x=document.getElementsByName(name);
          for(var n=0;n<x.length;n++)
          {
               x[n].checked=false;
          }

      y.checked = true;
}


Then the HTML for the checkboxes:

<input type="checkbox" name="boxname" id="box1" value="yes" onClick="oneCheck(this.name,this.id);">

<input type="checkbox" name="boxname" id="box2" value="no" onClick="oneCheck(this.name,this.id);">

Open in new window

0
 
jrtwigCommented:
Mistake in previous post:
additional bracket should be placed after y.checked = true' including it in the if statement block
function oneCheck(name,id)
{
     var y = document.getElementById(id);

     if (y.checked == true)
     {
						
          var x=document.getElementsByName(name);
          for(var n=0;n<x.length;n++)
          {
               x[n].checked=false;
          }

          y.checked = true;
     }
}

Open in new window

0
 
jhp333Commented:
jQuery solution:
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>

<input type="checkbox" name="chkYN" value="Yes"> YES
<input type="checkbox" name="chkYN" value="No"> NO

<script>
$('document').ready( function () {

$(':checkbox[name="chkYN"]').click( function () {
  $(':checkbox[name="chkYN"]:checked').not(this).attr('checked', false);
});

});
</script>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now