Solved

mutually exclusive checkboxes (not radio buttons.)

Posted on 2010-08-12
7
598 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 53

Expert Comment

by:Huseyin KAHRAMAN
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
Technology Partners: 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!

 
LVL 53

Expert Comment

by:Huseyin KAHRAMAN
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Text too large in Chrome 17 82
w3c parsing errors 4 35
javascript works in Chrome, but none of the other browsers 14 54
Pass a js value to an html form 5 40
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…

736 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