Selectionner un seul checkbox et cacher les autres checkbox
ksomda
Messages postés
35
Date d'inscription
Statut
Membre
Dernière intervention
-
ksomda Messages postés 35 Date d'inscription Statut Membre Dernière intervention -
ksomda Messages postés 35 Date d'inscription Statut Membre Dernière intervention -
Bonsoir tout le monde comment vous portez vous?
Je souhaite coché un seul checkbox parmi plusieurs checkbox. Le checkbox coché fait apparaître un menu déroulant verticale et en même temps cache les autres checkbox n'ont sélectionné. Quelqu'un peu t'il m'aider à avancer?
Voici mon code:
Je souhaite coché un seul checkbox parmi plusieurs checkbox. Le checkbox coché fait apparaître un menu déroulant verticale et en même temps cache les autres checkbox n'ont sélectionné. Quelqu'un peu t'il m'aider à avancer?
Voici mon code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Menu with checkbox</title>
<script language="javascript" type="text/javascript">
function GereControle(Controleur, Controle, Masquer)
{
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
if (Masquer=='1')
objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
else
objControle.disabled=(objControleur.checked==false)?false:true;
return true;
}
</script>
</head>
<body>
<div>
DEPOSER UNE ANNONCE
</div>
<br class="clear"/>
<div id="sub-header">
<div id="sub-header-center">
<div id="menu">
<ul id="nav"> CHOISIR UNE CATEGORIE </ul>
</div>
</div>
</div>
<div>
<div>
<input type="checkbox" id="coche_acheter" value="acheter et vendre" onClick="GereControle('coche_acheter', 'modele2', '1');"/>
<label for="coche_acheter"> ACHETER ET VENDRE</label>
<ul id="modele2" name="modele" style="visibility:hidden;" disabled="disabled">
<li>
<label name="Sous-Menu 1.1">Sous-Menu 1.1</a>
</li>
<li>
<label name="Sous-Menu 1.2">Sous-Menu 1.2</a>
</li>
<li>
<label name="Sous-Menu 1.3">Sous-Menu 1.3</a>
</li>
<li>
<label name="Sous-Menu 1.4">Sous-Menu 1.4</a>
</li>
<li>
<label name="Sous-Menu 1.2">Sous-Menu 1.5</a>
</li>
<li>
<label name="Sous-Menu 1.2">Sous-Menu 1.6</a>
</li>
</ul>
</div>
<br/>
<input type="checkbox" id="coche_auto" name="coche" onClick="GereControle('coche_auto', 'modeleAuto', '1');"/>
<label>AUTOS ET MOTOS</label>
<ul id="modeleAuto" name="modeleAuto" style="visibility:hidden;" disabled="disabled">
<li>
<label name="Sous-Menu 2.1"> Sous-Menu 2.1 </label>
</li>
<li>
<label name="Sous-Menu 2.2"> Sous-Menu 2.2 </label>
</li>
</ul>
<br/>
<input type="checkbox" id="coche_emploi" name="coche" onClick="GereControle('coche_emploi', 'modeleEmploi', '1');"/>
<label> EMPLOI (OFFRE ET CANDIDATURE) </label>
<ul id="modeleEmploi" name="modeleEmploi" style="visibility:hidden;" disabled="disabled">
<li>
<label name="Sous-Menu 3.1"> Sous-Menu 3.1 </label>
</li>
<li>
<label name="Sous-Menu 3.2"> Sous-Menu 3.2 </label>
</li>
</ul>
<br/>
<input type="checkbox" id="coche_immoLoc" name="coche" onClick="GereControle('coche_immoLoc', 'modeleImmoLoc', '1');" />
<label> IMMOBILIER (LOCATION) </label>
<ul id="modeleImmoLoc" name="modeleImmoLoc" style="visibility:hidden;" disabled="disabled">
<li>
<label name="Sous-Menu 3.1"> Sous-Menu 3.1 </label>
</li>
<li>
<label name="Sous-Menu 3.2"> Sous-Menu 3.2 </label>
</li>
</ul>
<br/>
<input type="checkbox" id="coche_immoVente" name="coche" onClick="GereControle('coche_immoVente', 'modeleImmoVente', '1');" />
<label> IMMOBILIER (EN VENTE) </label>
<ul id="modeleImmoLoc" name="modeleImmoLoc" style="visibility:hidden;" disabled="disabled">
<li>
<label name="Sous-Menu 4.1"> Sous-Menu 4.1 </label>
</li>
<li>
<label name="Sous-Menu 4.2"> Sous-Menu 4.2 </label>
</li>
</ul>
<br/>
<input type="checkbox" id="coche_service" name="coche" onClick="GereControle('coche_service', 'modeleService', '1');" />
<label> SERVICES </label>
<select id="modeleService" name="modeleService" style="visibility:hidden;" disabled="disabled">
<option>rouge</option>
<option>bleu</option>
</select>
<br/>
</div>
</body>
</html>
A voir également:
- Selectionner un seul checkbox et cacher les autres checkbox
- Cacher son numéro - Guide
- Cacher conversation whatsapp - Guide
- Cacher ses amis sur facebook - Guide
- Cacher un dossier windows - Guide
- Selectionner texte sur pdf - Guide
2 réponses
salut,
En gros tu veux effectuer ces actions sans recharger la page?
Si oui tu dois passer par de l'Ajax et ne pas te limiter au php.
En gros tu veux effectuer ces actions sans recharger la page?
Si oui tu dois passer par de l'Ajax et ne pas te limiter au php.
ok.merci du conseil. j'ai trouvé la solution à ce problème. c'est ce script qui me l'a permis:
function GereControle(Controleur, Controle, Masquer)
{
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
if (Masquer=='1')
objControle.style.display=(objControleur.checked==true)?'block':'none';
else
objControle.disabled=(objControleur.checked==false)?false:true;
var all=document.getElementById('groupe').getElementsByTagName("input")
var quantite=0
for (var i=0; i < all.length; i++){
if (all[i].checked==false){
all[i].parentNode.style.display='none'
quantite++
}
}
if(quantite==all.length){
for (var i=0; i < all.length; i++){
if (all[i].getAttribute('type')=='checkbox'){
all[i].parentNode.style.display='block'
}
}
}
}
</script>