Solved

mutually exclusive checkboxes (not radio buttons.)

Posted on 2010-08-12
7
592 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

776 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