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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Outils Pilotage MySys</title>
<style>
/* evite l'affichage au chargement */
#info div{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#journal').addClass("actif");
// masquage de toutes les div div_xxxx
// SUPPRIME géré directement avec le style #info div{display:none}
//$( 'div[id^="div_"]').hide();
// recup des radio plus le select
var oControle = $('input[name*="radio"], select');
if( window.console) console.log( oControle);
// affecte fonction à chacun
$.each( oControle, function( ind, elem){
$(elem).on( 'click', function(e){
// recup des champs checked de la form
var champ = $( 'form').serializeArray();
var retour = [];
$.each( champ, function( ind, data){
retour[ind] = data.value;
// retour.push(data.value); // meme chose que ci dessus
});
// affiche la bonne DIV
showDiv( retour);
});
});
});
function showDiv( data){
// recup id de la DIV a afficher
var idDiv = '#div_' +data.join('_');
// masquage de toutes les div div_xxxx
$( 'div[id^="div_"]').hide();
// affiche la bonne
$( idDiv).show();
}
</script>
</head>
<body>
<form method="get" action="affJournal.jsp">
<fieldset class="cadre">
<legend>Choix du journal</legend>
<table class="journal">
<thead>
<tr>
<th class="journal">Choix liste</th>
<th class="journal">Type du journal</th>
<th class="journal">Périodicité</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="lb_caisses" size="1" class="listbox">
<option value="opt1">Option #1</option>
<option value="opt2">Option #2</option>
</select>
</td>
<td class="journal">
<input type="radio" name="radio" value="tableau" id="tableau"><label for="tableau">Suivi tableaux</label><br>
<input type="radio" name="radio" value="frequentation" id="frequentation"><label for="frequentation">Suivi fréquentation</label><br>
<input type="radio" name="radio" value="datamart" id="datamart"><label for="datamart">Suivi datamart </label>
</td>
<td class="journal">
<input type="radio" class="radio2" name="radio2" value="quotidien" id="quotidien"><label for="quotidien">Quotidien</label><br>
<input type="radio" class="radio2" name="radio2" value="hebdo" id="hebdo"><label for="hebdo">Hebdomadaire</label><br>
<input type="radio" class="radio2" name="radio2" value="mensuel" id="mensuel"><label for="mensuel">Mensuel</label>
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<div id="info">
<!-- Option #1 -->
<div id="div_opt1_tableau_quotidien"><h2>Option #1</h2>Les données Tableau Quotidien</div>
<div id="div_opt1_tableau_hebdo"><h2>Option #1</h2>Les données Tableau Hebdo</div>
<div id="div_opt1_tableau_mensuel"><h2>Option #1</h2>Les données Tableau Mensuel</div>
<div id="div_opt1_frequentation_quotidien"><h2>Option #1</h2>Les données Frequentation Quotidien</div>
<div id="div_opt1_frequentation_hebdo"><h2>Option #1</h2>Les données Frequentation Hebdo</div>
<div id="div_opt1_frequentation_mensuel"><h2>Option #1</h2>Les données Frequentation Mensuel</div>
<div id="div_opt1_datamart_quotidien"><h2>Option #1</h2>Les données Datamart Quotidien</div>
<div id="div_opt1_datamart_hebdo"><h2>Option #1</h2>Les données Datamart Hebdo</div>
<div id="div_opt1_datamart_mensuel"><h2>Option #1</h2>Les données Datamart Mensuel</div>
<!-- Option #2 -->
<div id="div_opt2_tableau_quotidien"><h2>Option #2</h2>Les données Tableau Quotidien</div>
<div id="div_opt2_tableau_hebdo"><h2>Option #2</h2>Les données Tableau Hebdo</div>
<div id="div_opt2_tableau_mensuel"><h2>Option #2</h2>Les données Tableau Mensuel</div>
<div id="div_opt2_frequentation_quotidien"><h2>Option #2</h2>Les données Frequentation Quotidien</div>
<div id="div_opt2_frequentation_hebdo"><h2>Option #2</h2>Les données Frequentation Hebdo</div>
<div id="div_opt2_frequentation_mensuel"><h2>Option #2</h2>Les données Frequentation Mensuel</div>
<div id="div_opt2_datamart_quotidien"><h2>Option #2</h2>Les données Datamart Quotidien</div>
<div id="div_opt2_datamart_hebdo"><h2>Option #2</h2>Les données Datamart Hebdo</div>
<div id="div_opt2_datamart_mensuel"><h2>Option #2</h2>Les données Datamart Mensuel</div>
</div>
</body>
</html> |
Affichage table à partir de 2 boutons radios
Répondre avec citation
Compte tenu de la tournure de la discussion, je déplace sur le 
Envoyé par galia
Partager