Afficher un div selon la valeur d'une checkbox
Bonjour à tous,
Je débute en JQuery et je suis confrontée à un problème qui me dépasse...
Dans un formulaire, j'ai plusieurs listes de checkboxs dont les valeurs proviennent d'une base de données et sont affichées via un script PHP. Chaque liste comprend la valeur "Autre" (inscrite dans la base de données avec l'id 150) qui permet d'afficher un div avec un input text pour préciser sa réponse.
A cette liste je rajoute également une checkbox nommée différemment, ayant la valeur "Aucune", qui me permet de désactiver en Jquery les checkbox précédentes.
Mon script de désactivation marche très bien mais pour ce qui est d'afficher mes divs, cela est très aléatoire. Il faut cliquez sur la checkbox "Aucune" pour qu'il fonctionne correctement. :calim2:
J'ai également essayé l'exemple donné dans la FAQ JQuery mais je n'arrive pas vraiment à l'adapter et à détecter si ma valeur "150" figure dans la liste...
Voici ce que j'ai fait :
Code HTML
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
|
<form class="form" action="" method="post" name="step3">
<label>Quel(s) type(s) de vacances privilégiez-vous ?<br>
<i>(4 choix possibles)</i></label>
<?
//Interrogation de la BDD
$table = "type_vacances";
$item = liste($table,"id_type_vacances","id_type_vacances","");
if ($item != 0){
foreach ($item as $item){
$name = recup_intit ($item,$table,"id_type_vacances","intitule");
echo "<input type='checkbox' name='type_vacances[]' id='type_vacances' onclick=\"mafonction(this.value);\" class='autre_cont_tp' value=".$item.">".$item.$name."<br>";
}
echo "<input type='checkbox' name='".$table."_supp_no' id='".$table."_supp_no' onclick=\"checkSelected('".$table."_supp_no')\" value='0'>Aucun<br>";
}
?>
<div id="autre_type_vac" style="display:none;">
<table width="80%" border="1">
<tr>
<td width="40%" class="cellule_t_right"><label>Précisez</label></td>
<td class="cellule_t_left"><input type="text" name="autre_vacances" size="60"></td>
</tr>
</table>
</div>
</form> |
Le JS
La fonction checkSelected(htmlElement) est une fonction js qui me permet de gérer mes affichages conditionnels selon l'endroit du formulaire ou je me trouve (il est assez long et comporte pas mal de div).
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
|
function checkSelected(htmlElement) {
var pro = document.getElementById(htmlElement).value;
//type de vacances (autre checkbox)
$(":checkbox[name='type_vacances[]']").click(function(){
var objChecked = $("input[name='type_vacances[]']:checked"),
n = objChecked.length,
tab = [];
for(var i = 0; i <= n; i++){
if($(objChecked[i]).val() == "150"){
$("#autre_type_vac").show("fast");
}
else{
$("#autre_type_vac").hide();
}
}
});
//Aucun
var aucune_tp = $("input:checked[name='type_vacances_supp_no']").val();
if(aucune_tp == "0"){ $('.autre_cont_tp').attr('disabled', '');}else{ $('.autre_cont_tp').removeAttr('disabled');}
} |
Si quelqu'un a une piste ou un lien pour me guider, je suis preneuse.
Un grand merci par avance.
