Solved

mutually exclusive checkboxes (not radio buttons.)

Posted on 2010-08-12
7
589 Views
Last Modified: 2012-05-10
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
Comment
Question by:eggster34
7 Comments
 
LVL 1

Expert Comment

by:boboudreau
ID: 33421702
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 33421745
use radio button instead

<input type=radio name=rgOpt value="1"> A
<input type=radio name=rgOpt value="2"> B
0
 
LVL 16

Expert Comment

by:13598
ID: 33421767
You could make your second checkbox checked value equal not the first checkbox checked value.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 51

Expert Comment

by:HainKurt
ID: 33421805
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
 
LVL 2

Expert Comment

by:jrtwig
ID: 33421865
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
 
LVL 2

Accepted Solution

by:
jrtwig earned 500 total points
ID: 33421912
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
 
LVL 7

Expert Comment

by:jhp333
ID: 33423440
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now