Bonjour le peuple!

J'ai un petit problème (ou du moins une question).
Je vous explique !

J'ai un formulaire (ressemblant à ceci : )

Nom : f1.png
Affichages : 375
Taille : 12,4 Ko

Voici le code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
77
78
79
80
81
82
83
84
85
 
<script type="text/javascript">
	function verif ()
	{
		var etat = document.getElementById('check').checked;
 
		if(etat)
		{
			document.getElementById('1').className = 'on';
		}
		else
		{
			document.getElementById('1').className = 'off';
		}
	}
</script>
<style type="text/css">
.on {
    display: block;
}
 
.off {
    display: none;
}
</style>
completer champs en fonction select option
<form method="post" action="traitement.php">
	<tr> 
		<td width="12%" bgcolor="#E4E4E4">Famille d&eacute;j&agrave; existante ?</td>  
		<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
			<input id="check" type="checkbox" onChange="verif();">
		</td>
		<div id="1" class="off">
			<td width="10%" align="left" colspan="2" bgcolor="#FFFFFF">
				<select name="TypsociPerso" size="1">
					<option value=''>- Choix -</option>
					<option value='1'>Binal</option>
					<option value='2'>Somier</option>
					<option value='3'>Sarod</option>
					<option value='4'>Timo</option>
					<option value='5'>Wiser</option>
				</select>
			</td>
		</div>
	</tr>
	<tr>
		<td  align="center" colspan="10">&nbsp;</td>
	</tr>
	<table width="100%" border="0" cellspacing="2" cellpadding="5">
		<tr>
			<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF"><b>Informations</b></font></td>
			<tr>
				<td  align="center" colspan="10">&nbsp;</td>
			</tr>
			<tr> 
				<td width="12%" bgcolor="#C9C9C9">Nom famille</td>
				<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" ></td>
				<br>
			</tr>
			<tr>
				<td  align="center" colspan="10">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td width="27%" align="center" bgcolor="#C9C9C9">Papa</td>
				<td width="27%" align="center" bgcolor="#C9C9C9">Maman</td>
				<td align="center" bgcolor="#C9C9C9">Voisin</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#C9C9C9">Tel Fixe</td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixePa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixeMa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixeVo" type="tel" maxlength="10" value=""></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#C9C9C9">Tel Portable</td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortPa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortMa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortVo" type="tel" maxlength="10" value=""></td>
			</tr>
			<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF">-<i>15/06/2016</i>-</font></td>
		</tr>
	</table>
	<input type="submit" value="Valider" name="Valider">
</form>
A l'heure actuelle, si l'on clique sur la checkbox "Famille déjà existante?" un menu apparrait.
(Comme ceci

Nom : f2.png
Affichages : 401
Taille : 16,3 Ko

Ce que j'aimerai , c'est que lorsqu'on clique sur une famille, les champs ci dessous prennent les valeurs de la famille renseignées dans la base de données
(Comme ceci : )

Nom : f3.png
Affichages : 347
Taille : 16,3 Ko

Ma question est : Comment faire ? Quelqu'un peut il maider? Et partager quelques lignes de code avec moi au coin du feu.

... Jquery?
(Il n'y a pour l'instant aucun acces à la base de données, je viens simplement de mettre là le squellette du programme :p)


Merci d'avance !