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
| <div id="controls"><p>Mode :</p>
<label>Aucun accès <input id="ctrlAucun" name="ctrl" type="radio" onclick="checkAll('aucun')" /></label>
<label>Plans <input id="ctrlPlan" name="ctrl" type="radio" onclick="checkAll('plan')" /></label>
<label>Clés <input id="ctrlCle" name="ctrl" type="radio" onclick="checkAll('cle')" /></label>
<label>Autre <input id="ctrlAutre" name="ctrl" type="radio" onclick="uncheckAll()" /></label>
</div>
<div id="professeurs">
<div><p>Professeur machin :</p>
<label>Aucun accès <input name="machin" type="radio" class="aucun" onclick="controls()" /></label>
<label>Plans <input name="machin" type="radio" class="plan" onclick="controls()" /></label>
<label>Clés <input name="machin" type="radio" class="cle" onclick="controls()" /></label>
</div>
<div><p>Professeur truc :</p>
<label>Aucun accès <input name="truc" type="radio" class="aucun" onclick="controls()" /></label>
<label>Plans <input name="truc" type="radio" class="plan" onclick="controls()" /></label>
<label>Clés <input name="truc" type="radio" class="cle" onclick="controls()" /></label>
</div>
<div><p>Professeur chouette :</p>
<label>Aucun accès <input name="chouette" type="radio" class="aucun" onclick="controls()" /></label>
<label>Plans <input name="chouette" type="radio" class="plan" onclick="controls()" /></label>
<label>Clés <input name="chouette" type="radio" class="cle" onclick="controls()" /></label>
</div>
<div><p>Professeur bidule :</p>
<label>Aucun accès <input name="bidule" type="radio" class="aucun" onclick="controls()" /></label>
<label>Plans <input name="bidule" type="radio" class="plan" onclick="controls()" /></label>
<label>Clés <input name="bidule" type="radio" class="cle" onclick="controls()" /></label>
</div>
</div>
<script type="text/javascript">
// getElementsByClassName compatible IE
function gEBCN(classe,parent) {
parent = parent || document;
if(parent.getElementsByClassName) {
return parent.getElementsByClassName(classe);
} else {
var all = parent.getElementsByTagName('*'),
i, l=all.length,
res = [];
for(i=0;i<l;i++) {
if(all[i].className === classe) { res.push(all[i]); }
}
return res;
}
}
// Coche tous les éléments ayant comme className classe
// dans le div professeurs
function checkAll(classe) {
var radios = gEBCN(classe,document.getElementById('professeurs')),
i, l=radios.length;
for(i=0;i<l;i++) {
radios[i].checked = true;
}
}
// Décoche tous les radios dans le div professeurs
function uncheckAll() {
var inputs = document.getElementById('professeurs').getElementsByTagName('input'),
i, l=inputs.length;
for(i=0;i<l;i++) {
if(inputs[i].type === 'radio') {
inputs[i].checked = false;
}
}
}
// Retourne true ou false selon si
// tous les inputs ayant pour className classe
// dans le div professeurs sont cochés
function controlHasToBeChecked(classe) {
var radios = gEBCN(classe,document.getElementById('professeurs')),
i, l=radios.length,
hasToBeChecked = true;
for(i=0;i<l;i++) {
if(!radios[i].checked) { hasToBeChecked = false; break; }
}
return hasToBeChecked;
}
// Gère l'état des 4 radios de contrôle
// selon celui des inputs du div professeurs
function controls() {
var ctrlAucun = document.getElementById('ctrlAucun'),
ctrlPlan = document.getElementById('ctrlPlan'),
ctrlCle = document.getElementById('ctrlCle');
ctrlAucun.checked = controlHasToBeChecked('aucun');
ctrlPlan.checked = controlHasToBeChecked('plan');
ctrlCle.checked = controlHasToBeChecked('cle');
if(!ctrlAucun.checked && !ctrlPlan.checked && !ctrlCle.checked) {
document.getElementById('ctrlAutre').checked = true;
}
}
</script> |
Input radio, onclick et remplissage auto
Répondre avec citation
Partager