décocher éléments dans un formulaire en accordéon

bonjour
j'ai créé un formulaire en accordéon avec des lignes de choix en sous menu qui apparaissent lorsque l'on coche des cases dans une liste de choix multiples.

Je souhaite que le sous menu disparaisse si l'utilisateur change d'avis et décoche son choix et que les cases cochées dans le sous menu se décochent aussi automatiquement. Je ne trouve pas comment faire. Si quelqu'un peut m'aider à y arriver ce serait vraiment très sympa.

Voici le lien pour accéder au modèle de formulaire que j'ai créé :
http://exchange.us.free.fr/test/questionnaire.html

et le code:

Code:

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
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Form</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript">
 
$(document).ready(function() {
  $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon)
  $('.checkbox_accordeon').click(function() { // si on clique sur un titre (ici tous les éléments contenu en les balises h4)
    $(this).next('div:hidden').slideDown() // on deroule le div caché qui suit directement le titre
    .siblings('div:visible').slideUp(); // et on cache les div similaires qui etait visible
  });
 
 
});
 
 
</script>
 
</head>
<body >
 
		<h1>formulaire</h1>
		<form id="form_438542" class="appnitro"  method="post" action="">
 
 
<!--CHOIX1: Premier niveau de choix-->	
<p class="checkbox_accordeon"><input id="element_7_1" name="element_7_1" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="element_7_1">Choix1</label></p>
 
	<!--2eme niveau de choix-->	
	<div class="accordeon">
 
		<input id="element_8_1" name="element_8" class="element radio" type="radio" value="1" />
		<label class="choice" for="element_8_1">Proposition1</label>
		<input id="element_8_2" name="element_8" class="element radio" type="radio" value="2" />
		<label class="choice" for="element_8_2">Proposition2</label>			
</div>
 
 
<!--CHOIX2: Premier niveau de choix-->
<p class="checkbox_accordeon"><input id="element_7_2" name="element_7_2" class="checkbox" type="checkbox" value="1" />
<label class="choice" for="element_7_2">Choix2</label></p>
 
	<!--2eme niveau de choix-->	
	<div class="accordeon">
		<input id="element_7_2" name="element_7_2" class="checkbox" type="checkbox" value="1" />
		<label class="choice" for="element_7_2">Proposition1</label>
		<input id="element_7_2" name="element_7_2" class="checkbox" type="checkbox" value="1" />
		<label class="choice" for="element_7_2">Proposition2</label>
		<input id="element_7_2" name="element_7_2" class="checkbox" type="checkbox" value="1" />
		<label class="choice" for="element_7_2">Proposition3</label>       
	</div>
</form>
 
 
</body>
</html>