Radio Button, JS

[euphoric]

Sveiki, meklēju i-netā darbības principu un piemērus, šādai lietai :

 

Neko sakarīgu neatradu, jo nezinu īsti kā to sauc?!

 

Varbūt kāds var ispalīdzēt ?

 

Pāldies :)

[briedis]

Nezinu kā te var ISpalīdzēt, vienīgi uztaisot tavā vietā, jo pats neko neesi darījis.

 

Ir vairāki varianti kā šo realizēt, un nebūs tik vienkārši izstāstīt...

 

Varbūt sāc ar to, ka ir sākuma saraksts (div elements ar radio pogām), un katram radio buttonam ir attiecīgi cits saraksts (2. līmenis) pakārtots (paslēpti div elementi ar attiecīgo radio pogu sarakstu). Tad kā izvēlies sākotnējo kategoriju(atķeksē kādu radio pog), tā ar JS paslēp visus 2. līmeņa sarakstus, un parādi tikai 1 sarakstu, kas ir atbilstošs 1. līmeņa izvēlētajam. Utt.

 

Te noteikti ļoti dzīvi atvieglotu jQuery...

 

Kaut ko vari provēt meklēt pēc atslēgvārdiem - radio button subcategories, multilevel categories...

Edited January 16, 2010 by briedis

[euphoric]

Oke, paldies par to pašu :)

[euphoric]

mhm..izrakņājos pa visu googli un bez rezultātiem, nav nekādu piemēru.. :(

 

jQuery offic. lapā arī meklēju , bet neko jedzīgu neatradu, vienk nav tā prakse ar JS tapēc īsti nezinu kas un kā.

 

Varbūt kāds varētu uzmest aptuveno bildi ?

 

Paldeis jau iepriekš :)

[euphoric]

Kko te cenšos salīmēt kopā, bet rodas problēmas, jo trūkst zināšanu :

 

JS :

 

<script language="JavaScript">
var ids=new Array('d1','d2','d3');

function switchid(id){	
hideallids();
showdiv(id);
}

function hideallids(){
for (var i=0;i<ids.length;i++){
	hidediv(ids[i]);
}		  
}

function hidediv(id) {
if (document.getElementById) { 
	document.getElementById(id).style.display = 'none';
}
else {
	if (document.layers) { 
		document.id.display = 'none';
	}
	else { 
		document.all.id.style.display = 'none';
	}
}
}

function showdiv(id) {

if (document.getElementById) { 
	document.getElementById(id).style.display = 'block';
}
else {
	if (document.layers) { 
		document.id.display = 'block';
	}
	else { 
		document.all.id.style.display = 'block';
	}
}
}
</script>

 

 

HTML :

 

<form action="" method="post" name="classic">
<table>
<tr>
	<td style=" padding-right:10px;">
	<input name="btn1" type="radio" value="1" onclick="switchid('d1');" /> <label> Darbs un bizness </label> <br />
	<input name="btn1" type="radio" value="1" onclick="switchid('d2');" /> <label> Transports </label> <br />
	<input name="btn1" type="radio" value="1" onclick="switchid('d3');" /> <label> Elektronika </label> <br />
	</td>

	<td style=" padding-left:20px;">
	<div id="d1" style="display:none;"> 
	<input name="btn2" type="radio" value="1" /> <label> Piedāvā vakances </label> <br />
	<input name="btn2" type="radio" value="1" /> <label> Meklē darbu </label> <br />
	<input name="btn2" type="radio" value="1" /> <label> Darbiekārtošanas pakalpojumi </label> <br />
	</div>

	<div id="d2" style="display:none;"> 
	<input name="btn2" type="radio" value="1" /> <label> Vieglais auto </label> <br />
	<input name="btn2" type="radio" value="1" /> <label> Kravas auto un autobusi </label> <br />
	<input name="btn2" type="radio" value="1" /> <label> Moto transports </label> <br />
	</div>

	<div id="d3" style="display:none;"> 
	<input name="btn2" type="radio" value="1" /> <label> Sakaru līdzekļi </label> <br />
	<input name="btn2" type="radio" value="1" /> <label> Datortehnika </label> <br />
	<input name="btn2" type="radio" value="1" /> <label> Foto un optika </label> <br />
	</div>
               </td>
        </tr>
</table>
</form>

 

Vajadzētu to kas ir iekš ID = d1,d2,d3 => massīvā un tad to info vienk. vilkt arā, jo citādi tas html's tur buus nenormali daudz.

 

Bet nezinu kā lai to realizē ?!

 

Varbūt kāds var palīdzēt ?

 

Pāldies :)