Question : What is the trick to using a checkbox, or a radio to trigger jQuery toggle() ?

http://brianfalls.com/playground/jQuery_sandBox/toggleTest.cfm

The check box won't check or un-check, and the radio checks but won't un-check. What's the trick? Either will work, but it's be nice to know both tricks.

TIA

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>jQuery UI Effects - Toggle Delima</title>
	
	<link rel="stylesheet" type="text/css" href="development-bundle/themes/base/jquery.ui.all.css">
	<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery.effects.slide.js"></script>

	<style type="text/css">
		body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
		.toggler { width: 500px; height: 200px; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		.ui-effects-transfer { border: 2px dotted gray; } 
		span { color: #880000; font-size: 11px; font-weight: bold; }
	</style>
	
	<script type="text/javascript">
		
		$(function() {
			//run the currently selected effect
			function runEffect(){
				//get effect type from 
				var selectedEffect = 'slide';
				
				//most effect types need no options passed by default
				var options = {};
				//check if it's scale, transfer, or size - they need options explicitly set
				if(selectedEffect == 'scale'){  options = {percent: 0}; }
				else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
				
				//run the effect
				$("#effect").toggle(selectedEffect,options,500);
			};
			
			//set effect from select menu value
			$("#checkbox").click(function() {
				runEffect();
				return false;
			});
			
			//set effect from select menu value
			$("#radio").click(function() {
				runEffect();
				return false;
			});
	
		});
		
	</script>
	
</head>

<body>

	<div class="demo">
	
		<div class="toggler">
			<div id="effect" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Lorem</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare egestas arcu eu auctor.</p>
			</div>
		</div>
		
		<p><input type="checkbox" id="checkbox" class="ui-state-default ui-corner-all">Run Effect <span>(I work, but the checkbox does not 'check'.)</span></p>
		<p><input type="radio" id="radio" class="ui-state-default ui-corner-all">Run Effect <span>(I work, but the radio does not 'un-check' once 'checked'.)</span></p>
	
	</div>

</body>

</html>

Question : What is the trick to using a checkbox, or a radio to trigger jQuery toggle() ?

Answer : What is the trick to using a checkbox, or a radio to trigger jQuery toggle() ?

Remove return false;

Work only for the checkbox, you should add a new radio button (hidden one ?) to "toggle" the radio button

Question : What is the trick to using a checkbox, or a radio to trigger jQuery toggle() ?

Answer : What is the trick to using a checkbox, or a radio to trigger jQuery toggle() ?

Remove return false;Work only for the checkbox, you should add a new radio button (hidden one ?) to "toggle" the radio button

Remove return false;

Work only for the checkbox, you should add a new radio button (hidden one ?) to "toggle" the radio button