Zobrazenie a skryvanie DIVu

max-m · Napísal **max-m**: 26.02.2008 16:03

rad by som na stranku vlozil checkbox a podla toho ci je zaskrtnuty by sa zobrazil/skryl <div>. ked pouzijem tento kod

Kód:

<script type="text/javascript">
function change_it()
{
 if (document.getElementById('checkboxes').checked="checked")
 {
  document.getElementById('this_div1').style.display="block";
 }
 elseif (document.getElementById('checkboxes').checked="")
 {
  document.getElementById('this_div1').style.display="none";
 }
}
</script>
<div id="checkboxes">Check: <input type="checkbox" onChange="change_it()"/></div>
<br />
<div id="this_div1" style="display:none;">Check the radio button above...</div>

tak <div> zobrazim zaskrtnutim ale ked chceckbox odskrtnem, <div> zostava stale viditelny.
ako by sa dalo nieco take spravit (skusal som daj aj == namiesto =, no vtedy to nerobi uz vobec nic)?

DIK.

juho · Napísal **juho**: 26.02.2008 16:34

oprav elseif na else if alebo to mozes dat kludne ako else bez if kedze ina podmienka uz nastat nemoze.

max-m · Napísal autor témy **max-m**: 26.02.2008 17:24

skusil som uz aj to a nepomohlo.

sento · Napísal **sento**: 26.02.2008 20:22

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
<script type="text/javascript"> 
function change_it() 
{ 
 var obj_check = document.getElementById('checkboxes');
 var obj_div =  document.getElementById('this_div1');
 
 if (obj_check.checked==true) 
 { 
  obj_div.style.display="block"; 
 } 
 else if (obj_check.checked==false) 
 { 
  obj_div.style.display="none"; 
 } 
} 
</script> 
  </head>
  <body>
Check: <input id="checkboxes" type="checkbox" onClick="change_it()"/> 
<br /> 
<div id="this_div1" style="display:none;">Check the radio button above...</div>
  </body>
</html>

... zhruba takto

max-m · Napísal autor témy **max-m**: 26.02.2008 23:24

dik sento. to je presne to, co so potreboval.

pedrix · Napísal **pedrix**: 06.08.2008 20:08

Vedeli by sme mi poradit ako zriesit nieco taketo.Mam select:

Kód:

<input select name "select" >
<option>nieco1</option>
<option>nieco2</option>
<option>ina moznost</option>

Potrebujem aby sa mi pri zvoleni ina moznost zobrazil input,vlastne to iste ako tu bol priklad s checkboxom len namiesto neho potrebujem vyuzit select.Skusal som uz vsetko mozne ale nie a nie aby to fungovalo...za kazdu pomoc dakujem

pedrix · Napísal **pedrix**: 07.08.2008 22:33

Tak uz to mam.Ak sa to nahodou niekomu hodi:

Kód:

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
  <script language="JavaScript"><!--

   function nastav() {
    var s1 = document.getElementById('s1');
    var d0 = document.getElementById('d0');
    var d1 = document.getElementById('d1');
    if (0 == s1.selectedIndex) {
     d0.style.display = 'block';
     d1.style.display = 'none';
    }
    if (1 == s1.selectedIndex) {
     d0.style.display = 'none';
     d1.style.display = 'block';
    }
   }

  //--></script>
 </head>
 <body onload="nastav();">
  <p>
   <select id="s1" name="s1" onclick="nastav();">
    <option>Schovaj</option>
    <option>Zobraz</option>
   </select>
  </p>
  <div id="d0">
  </div>
  <div id="d1">
<input type="text" name="input" >
  </div>
 </body>
</html>

//pouzivaj code. suchy

jurov · Napísal **jurov**: 17.08.2009 10:10

Čaute, tiež potrebujem zobraziť/skryť div na základe zmeny výberu v selecte, len myslím že by sa to malo dať urobiť aj jednoduchšie. Mám spoločnú funkciu pre celú stránku na zobrazenie/skrytie divu, ktorú som doteraz volal iba pomocou odkazu, tu by som ju chcel zavolať v selecte.
Toto mi ale funguje iba v IE. Vie mi niekto poradiť, čo zmeniť aby to fungovalo aj v ostatných prehliadačoch?

Kód:

<select name="kategoria" onchange="location.href=this.options[this.selectedIndex].href">
<option value="str" href="JavaScript:HidView(document.getElementById('novakat'))">Stromy</option>
<option value="kve" href="JavaScript:HidView(document.getElementById('novakat'))">Kvety</option>
<option value="new" href="JavaScript:HidView(document.getElementById('novakat'))">Pridať novú kategóriu...</option>
</select>

<div id="novakat" style="display:none">
Názov novej kategórie<input type="text" name="novakat" value="" />
</div>

Ďuri · Napísal **Ďuri**: 17.08.2009 11:47

Co mas vo fcii HidView? V kazdom pripade ten onchange na selecte ta okamzite presmeruje, tak neviem, co by si chcel skryvat.
Este otazka, po vybrati akej moznosti sa ma div zobrazit a po vybrati akej moznosti sa ma zasa skryt?

jurov · Napísal **jurov**: 17.08.2009 20:56

Ďuri píše:

Co mas vo fcii HidView? V kazdom pripade ten onchange na selecte ta okamzite presmeruje, tak neviem, co by si chcel skryvat.
Este otazka, po vybrati akej moznosti sa ma div zobrazit a po vybrati akej moznosti sa ma zasa skryt?

HidView vyzerá takto

Kód:

function HidView(item) 
{
   if (item.style.display == "none") 
   {
    item.style.display = "block";
   }
   else 
   {
    item.style.display = "none";
   }
}

Prvé dve majú skrývať a posledná má zobraziť. V Exploreri to ide ako chcem: zobrazí/skryje div ale vo FireFoxe a iných presmeruje na inú stránku, ktorú samozrejme nenájde. Podľa mňa tam asi treba iba nejako opraviť iba toto: onchange="location.href=this.options[this.selectedIndex].href"

Ďuri · Napísal **Ďuri**: 18.08.2009 8:42

Toto by malo fungovat, navyse ziadnu fciu HidView nepotrebujes:

Kód:

<select name="kategoria" onchange="var novakat = document.getElementById('novakat'); if (this.selectedIndex == (this.options.length - 1)) { novakat.style.display = 'block' } else { novakat.style.display = 'none' }">
<option value="str">Stromy</option>
<option value="kve">Kvety</option>
<option value="new">Pridať novú kategóriu...</option>
</select>

<div id="novakat" style="display:none">
Názov novej kategórie<input type="text" name="novakat" value="" />
</div>

Je to napisane tak, ze mozes kludne pridat aj dalsie moznosti a nic nemusis menit. Len ta posledna stale div zobrazuje, ostatne skryvaju. Netestovane v IE, nemam.

jurov · Napísal **jurov**: 18.08.2009 17:31

dik ide to

Zobrazenie a skryvanie DIVu

Podobné témy