help with toggling checkboxes

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
buzzby247
Forum Newbie
Posts: 23
Joined: Wed Jan 14, 2009 6:19 am

help with toggling checkboxes

Post by buzzby247 »

i have looked for tutorials to toggle checkboxes. there are quite a few but they dont seem to do what i need it to do. in my form i have a question that needs an answer. normally i would use a radio button for it. in this case i am not sure a radio button will work because only when the button is pressed do i want another action to happen.

when the 'yes' checkbox is checked then a field needs to be displayed for the user to enter some information. when the 'yes' checkbox is not checked then the field disappears. when pressing a radio button once the field appears and when you press it again the field disappears but the button is still 'checked'.

i also want to toggle the 2 checkboxes so when one is checked i see the field for infor input and when the other is checked not only do i not see the field but i also see the 'yes' checkbox unchecked and the 'no' checkbox checked.

so its like i am looking for the visuals of the checkbox, to clearly see when its checked and when its not, with the functionality of a radio button, where 2 buttons in a group cannot both be checked. its either on or the other (toggle)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: help with toggling checkboxes

Post by pickle »

This can be done with a radio button (and javascript of course). Just put an onclick (or .click() if you're using a library) listener on each radio button. When the 'yes' radio is checked, show the field. When the 'no' radio is checked, hide the field. Name the radio buttons the same & they'll take care of being exclusive.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: help with toggling checkboxes

Post by jack_indigo »

Enjoy...

Code: Select all

 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$().ready(function(){
  $('#fldItem1Text').hide();
  $('#fldItem2Text').hide();
  $('#fldItem1').click(function() {
    if ($(this).attr('checked')) {
      $('#fldItem1Text').show();
      $('#fldItem2Text').val('').hide();
    } else {
      $('#fldItem1Text').val('').hide();
    }
  }); //end click
  $('#fldItem2').click(function() {
    if ($(this).attr('checked')) {
      $('#fldItem2Text').show();
      $('#fldItem1Text').val('').hide();
    } else {
      $('#fldItem2Text').val('').hide();
    }
   }); //end click
}); // end if ready
</script>
</head>
<body>
<form method="post" action="process-form.php"> 
<input type="checkbox" id="fldItem1" name="fldItem1" value="1" /> Item #1
<input type="text" id="fldItem1Text" name="fldItem1Text" value="" /><br />
 
<input type="checkbox" id="fldItem2" name="fldItem2" value="1" /> Item #2
<input type="text" id="fldItem2Text" name="fldItem2Text" value="" /><br />
 </form>
</body>
</html>
 
Post Reply