Use checkbox rather than radio buttons on form

I have a form that uses Jquery to show or hide input boxes depending on what the user has checked.

The form currently uses radio button to show the extra input but I want to use a single checkbox. So, if you select the checkbox the other inputs display.

I have attached the Jquery code.

Anyone know how to edit that code so this can happen?


form formopen
$(document).ready(function(){
	$("#parent2").css("display","none");
            
    $(".aboveage2").click(function(){
    	if ($('input[name=X1include]:checked').val() == "No" ) {
        	$("#parent2").slideDown("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded');              
        } else {
            $("#parent2").slideUp("fast");	//Slide Up Effect
            $.cookie('showTop', 'collapsed');
        }
     });  
     
      var showTop = $.cookie('showTop');  
     
      if (showTop == 'expanded') {  
		
      	$("#parent2").show("fast");  
        $('input[name=X1include]:checked');  

      } else {
      	$("#parent2").hide("fast");
        $('input[name=X1include]:checked');
      }  
          
});

/*With jQuery Cookie*/
$(document).ready(function(){
	$("#parent3").css("display","none");
            
    $(".aboveage3").click(function(){
    	if ($('input[name=age3]:checked').val() == "No" ) {
        	$("#parent3").slideDown("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded');              
        } else {
            $("#parent3").slideUp("fast");	//Slide Up Effect
            $.cookie('showTop', 'collapsed');
        }
     });  
     
      var showTop = $.cookie('showTop');  
     
      if (showTop == 'expanded') {  
		
      	$("#parent3").show("fast");  
        $('input[name=age3]:checked');  

      } else {
      	$("#parent3").hide("fast");
        $('input[name=age3]:checked');
      }  
          
});

Open in new window

BrighteyesDesignAsked:
Who is Participating?
 
StingRaYConnect With a Mentor Commented:
Try this:

// JS part
$(document).ready(function(){
	$('ol:not(:first)').hide();
	$('input:checkbox.addguest').live('click', function() {
		if ($(this).is(':checked')) {
			$(this).parents('ol').next('ol').slideDown('fast').find('input:checkbox').removeAttr('checked');
		} else {
			$(this).parents('ol').nextAll('ol').slideUp("fast");
		}
	});
});

Open in new window


<!-- HTML part -->
<form action="http://www.romancart.com/cart.asp" method="post">
	<input type="hidden" name="storeid" value="57502" />
	<input type="hidden" name="itemname" value="monthly meeting title"/>
	<input type="hidden" name="itemname2" value="12/12/12"/>
	<input type="hidden" name="itemname3" value="12:30"/>
	<input type="hidden" name="itemname4" value="London"/>
	<input type="hidden" name="dependentmaster" value="yes">
	<input type="hidden" name="price" value="10.00" />
	<input type="hidden" name="X1price" value="20.00">
	<input type="hidden" name="X1storeid" value="57502">
	<input type="hidden" name="X1quantity" value="1">
	<ol class="formset">
		<li>
			<label for="X1itemname">First Name: </label>
			<input type="text" id="X1itemname" value="" name="X1itemname"/></li>
		<li></li>
		<li>
			<label for="age2">Book another guest</label> 
			<input type="checkbox" name="X1include" value="Yes" class="addguest aboveage2"></li>
	</ol>
	<ol id="parent2" class="formset">
		<li><strong>Guest 1</strong></li>
		<li><label for="pname2">Name: </label>
		<input type="text" id="pname2" value="" name="pname2"/></li>
	   <li>
		 <label for="age3">Book another guest</label> 
		<input type="checkbox" name="age3" value="Yes" class="addguest aboveage3"></li>
	</ol>
	<ol id="parent3" class="formset">
		<li><strong>Parent/Guardian Information:</strong></li>
		<li>
			<label for="pname3">Name: </label>
			<input type="text" id="pname3" value="" name="pname3"/></li>
		</li>
		<li></li>
	</ol>
	<input type="image" src="img/button-book.gif" border="0" name="submit3" />
</form>

Open in new window

0
 
StingRaYCommented:
Try this:

// Javascript part
$(document).ready(function(){
	$('input.addguest').live('click', function() {
		if ($(this).is(':checked')) {
			html = $('div.guestbox:first-child').clone();
			$("input:checkbox", html).removeAttr("checked");
			$(this).parent().after(html);
		} else {
			$(this).parent().nextAll('.guestbox').remove();
		}
	});
});

Open in new window


<!-- HTML part -->
<form action="" method="get">
<div class="guestbox">
First Name: <input type="text" name="guestname[]" value=""><br>
Book another guest: <input type="checkbox" class="addguest">
</div>
<input type="submit" value="BOOK NOW">
</form>

Open in new window


Since I use the guestname input box as "guestname[]", it always send guest name to backend script as an array.
0
 
BrighteyesDesignAuthor Commented:
Hi StingRay,

Thanks for that

Shall I replace all of the current Javascript with your code?

Also, with the form, the name needs o be itemname one as that's a requirement for the cart i'm using .

Fyi: I have a link here that show how it is at the moment...http://www.anjoman.co.uk/formbin2.php
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
StingRaYCommented:
I have modded my code with your code. Hope this works for you.
0
 
BrighteyesDesignAuthor Commented:
Hi Stingray,

Thanks for that, all info stays visible though?

http://www.anjoman.co.uk/formexpertbin.html

0
 
chaitu chaituConnect With a Mentor Commented:

its not able to find below js file.check the path whether this js file exists or not.

js/jquery.cookie.js
0
 
BrighteyesDesignAuthor Commented:
Hi there,

That's now linked ok, still the same?
0
 
chaitu chaituCommented:
still am getting same error.first check out the js errors.
0
 
BrighteyesDesignAuthor Commented:
mmm strange Firefox and Safari find it ok?

I've linked it as a full url path to make sure

http://www.anjoman.co.uk/js/jquery.cookie.js
Screen-shot-2011-12-16-at-11.29..png
Screen-shot-2011-12-16-at-11.28..png
0
 
StingRaYCommented:
Include this line:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Open in new window


before:

<script type="text/javascript" src="http://www.anjoman.co.uk/js/jquery.cookie.js"></script>

Open in new window

0
 
BrighteyesDesignAuthor Commented:
Brilliant, it working perfectly now!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.