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; var all=document.getElementById(id_div_contenant_les_sections').getElementsByTagName("input") for (var i=0; i < all.length; i++){ if (all[i].getAttribute('type')=='checkbox' && all[i].checked==false){ all[i].parentNode.style.display='none' } } }
<!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.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> </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 id='groupe'> <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="display:none;" 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> <br/> </div> <div> <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="display:none;" 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/> </div> <div> <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="display:none;" 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/> </div> <div> <input type="checkbox" id="coche_immoLoc" name="coche" onClick="GereControle('coche_immoLoc', 'modeleImmoLoc', '1');" /> <label> IMMOBILIER (LOCATION) </label> <ul id="modeleImmoLoc" name="modeleImmoLoc" style="display:none;" 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/> </div> <div> <input type="checkbox" id="coche_immoVente" name="coche" onClick="GereControle('coche_immoVente', 'modeleImmoVente', '1');" /> <label> IMMOBILIER (EN VENTE) </label> <select id="modeleImmoVente" name="modeleImmoVente" style="display:none;" disabled="disabled"> <option>rouge</option> <option>bleu</option> </select> <br/> </div> <div> <input type="checkbox" id="coche_service" name="coche" onClick="GereControle('coche_service', 'modeleService', '1');" />* <label> SERVICES </label> <select id="modeleService" name="modeleService" style="display:none;"disabled="disabled"> <option>rouge</option> <option>bleu</option> </select> <br/> </div> </div> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ouvrir une pop-up et la centrer en javascript</title>
<script type="text/javascript">
function PopupTableau()
{
//w=open("test.html",'','width=400,height=400,menubar=no,toolbar=no,scrollbars=no,resizable=no');
width = 450;
height = 400;
var left=0;
var top=0;
left = (screen.width-width)/2;
top = (screen.height-height)/2;
window.open("test1.html","PopUp","width="+width+",height="+height+",location=yes,status=no,toolbar=no,scrollbars=no, top="+top+", left="+left);
}
</script>
<style>
.boutonInput
{
width: 750px;
border: 1px solid #000;
margin: 3px;
padding: 3px;
height: 32px;
}
.resultatPopup
{
float: left;
margin: 5px;
color: #555;
font-size:15px;
}
</style>
</head>
<body>
<div>Adresse:</div>
<div class="boutonInput"><div class="resultatPopup"> </div><div style="float:right;"><button href="" onclick="PopupTableau();">choix</button></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Menu with checkbox</title>
<link rel="stylesheet" href="css/styles.css">
<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.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>
</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 id='groupe'>
<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="display:none;" 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>
<br/>
</div>
<div>
<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="display:none;" 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/>
</div>
<div>
<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="display:none;" 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/>
</div>
<div>
<input type="checkbox" id="coche_immoLoc" name="coche" onClick="GereControle('coche_immoLoc', 'modeleImmoLoc', '1');" />
<label> IMMOBILIER (LOCATION) </label>
<ul id="modeleImmoLoc" name="modeleImmoLoc" style="display:none;" 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/>
</div>
<div>
<input type="checkbox" id="coche_immoVente" name="coche" onClick="GereControle('coche_immoVente', 'modeleImmoVente', '1');" />
<label> IMMOBILIER (EN VENTE) </label>
<ul id="modeleImmoVente" name="modeleImmoVente" style="display:none;" 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/>
</div>
<div>
<input type="checkbox" id="coche_service" name="coche" onClick="GereControle('coche_service', 'modeleService', '1');" />
<label> SERVICES </label>
<ul id="modeleService" name="modeleService" style="display:none;" disabled="disabled">
<li>
<label name="Sous-Menu 5.1"> Sous-Menu 5.1 </label>
</li>
<li>
<label name="Sous-Menu 5.2"> Sous-Menu 5.2 </label>
</li>
</ul>
<br/>
</div>
</div>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionfunction quitter(lui){ var valeur=lui.firstChild.nodeValue alert(parent.opener.document.getElementById('tt')) window.opener.document.getElementById('tt').value=valeur self.close() } function init(){ var all=document.getElementById('groupe').getElementsByTagName("li") for (var i=0; i < all.length; i++){ all[i].childNodes[1].onclick=function(){quitter(this)} } }
<textarea id='tt'></textarea>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ouvrir une pop-up et la centrer en javascript</title>
<script type="text/javascript">
function PopupTableau()
{
width = 450;
height = 400;
var left=0;
var top=0;
left = (screen.width-width)/2;
top = (screen.height-height)/2;
window.open("test1.html","PopUp","width="+width+",height="+height+",location=yes,status=no,toolbar=no,scrollbars=no, top="+top+", left="+left);
}
</script>
<style>
.boutonInput
{
width: 750px;
border: 1px solid #000;
margin: 3px;
padding: 3px;
height: 32px;
}
.resultatPopup
{
float: left;
margin: 5px;
color: #555;
font-size:15px;
}
</style>
</head>
<body>
<div class="boutonInput">
<div class="resultatPopup" > <label id="parent"></label> > <strong id="res"></strong> </div>
<div style="float:right;">
<button href="" onclick="PopupTableau();">choix</button>
</div>
</div>
</body>
</html>
ca marche uniquement sur firefox. je voudrai que ca marche les autres navigateurs surtout pour google chrome que j'utilise plus.... merci d'avance pour vos contributions
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Menu with checkbox</title>
<link rel="stylesheet" href="css/styles.css">
<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.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'
}
}
}
}
function maj(parent,val)
{
res= window.opener.document.getElementById("res");
groupe=window.opener.document.getElementById("parent");
res.innerHTML=val;
groupe.innerHTML=parent;
self.close();
}
</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 id='groupe'>
<div>
<input type="checkbox" id="coche_acheter" value="acheter et vendre" onClick="GereControle('coche_acheter', 'modele2', '1');"/>
<label for="coche_acheter"> ACHATS ET VENTES</label>
<ul id="modele2" name="modele" style="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.1')">Sous-Menu 1.1</a>
</li>
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.2')">Sous-Menu 1.2</a>
</li>
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.3')">Sous-Menu 1.3</a>
</li>
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.4')">Sous-Menu 1.4</a>
</li>
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.5')">Sous-Menu 1.5</a>
</li>
<li>
<a href="#" onclick="maj('ACHATS ET VENTES','Sous-Menu 1.6')">Sous-Menu 1.6</a>
</li>
</ul>
<br/>
</div>
<div>
<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="display:none;" disabled="disabled">
<li>
<a href="" onclick="maj('AUTOS ET MOTOS','Sous-Menu 2.1')"> Sous-Menu 2.1 </a>
</li>
<li>
<a href="#" onclick="maj('AUTOS ET MOTOS','Sous-Menu 2.2')"> Sous-Menu 2.2 </a>
</li>
</ul>
<br/>
</div>
<div>
<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="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('EMPLOI (OFFRE ET CANDIDATURE)','Sous-Menu 3.1')"> Sous-Menu 3.1 </a>
</li>
<li>
<a href="#" onclick="maj('EMPLOI (OFFRE ET CANDIDATURE)','Sous-Menu 3.2')"> Sous-Menu 3.2 </a>
</li>
</ul>
<br/>
</div>
<div>
<input type="checkbox" id="coche_immoLoc" name="coche" onClick="GereControle('coche_immoLoc', 'modeleImmoLoc', '1');" />
<label> IMMOBILIER (LOCATION) </label>
<ul id="modeleImmoLoc" name="modeleImmoLoc" style="display:none;" disabled="disabled">
<li>
<a href="#" onclick="maj('IMMOBILIER (LOCATION)','Sous-Menu 4.1 ')"> Sous-Menu 4.1 </a>
</li>
<li>
<a href="#" onclick="maj'IMMOBILIER (LOCATION)','Sous-Menu 4.2'')"> Sous-Menu 4.2 </a>
</li>
</ul>
<br/>
19 mars 2014 à 22:36