onclick event

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

onclick event

Δημοσίευση από quit » 15 Οκτ 2009 21:15

καλησπερα παιδια μηπως γνωριζει καποιος να μου πει πως μπορω κανοντας click σε ενα radio button να εμφανιζει ενα κειμενο σε μια νεα γραμμη απο κατω και ξανακάνοντας κλικ πανω του να εξαφανιζεται?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

onclick event

Δημοσίευση από dimsis » 15 Οκτ 2009 23:21

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show hide content when radio button clicked</title>
</head>
<script>
function showhide&#40;&#41; 
	&#123;	
	cnt=document.getElementById&#40;'content'&#41;;
		if &#40;cnt.style.visibility=="hidden"&#41;
			&#123;
			cnt.style.visibility="visible";
			&#125;
		else 
			&#123;
			cnt.style.visibility="hidden";
			&#125;
	&#125;
</script>
<body>
<form>
  <input type="radio" name="rd" id="rd" onclick="showhide&#40;&#41;" /> Show / Hide
</form>
<div id="content">DimSis was here.<br />
  Keep coding! </div>
</body>
</html>

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

onclick event

Δημοσίευση από quit » 16 Οκτ 2009 13:02

ευχαριστω πολυ dimsis

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

onclick event

Δημοσίευση από Banavas » 16 Οκτ 2009 14:06

Aν είναι μόνο μια η επιλογή καλύτερα είναι να γίνει με check box.
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

onclick event

Δημοσίευση από dimsis » 16 Οκτ 2009 14:22

Banavas έγραψε:Aν είναι μόνο μια η επιλογή καλύτερα είναι να γίνει με check box.
Συμφωνώ. Το radio δεν γίνετε enable / disable όταν το κλικάρεις. Παραμένει δηλαδή μόνιμα επιλεγμένο όταν είναι ένα με το που θα το κλικάρεις.

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

onclick event

Δημοσίευση από quit » 16 Οκτ 2009 19:40

να ρωτησω το παραπανω ισχυει οταν εχω αρκετα checkboxes ή radio ??
δηλαδη οταν κανω κλικ στο 1 check/radio να εμφανιζεται το κρυφο div του και οταν κανω κλικ στο 2
να κρυβεται το περιεχοενο του 1 και να εμφανιζεται του 2.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

onclick event

Δημοσίευση από dimsis » 16 Οκτ 2009 20:40

Όχι αυτό που περιγράφεις γίνετε με άλλο κώδικα.

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Show hide multiple content when you click a checkbox</title>
<style type="text/css">
#div1, #div2, #div3 &#123; display&#58;none;&#125;
</style>
<script type="text/javascript"> 
<!--
function showMe &#40;id, mydiv&#41; &#123;
var cnt = &#40;mydiv.checked&#41; ? "block" &#58; "none";
document.getElementById&#40;id&#41;.style.display = cnt;
&#125;
//-->
</script>
</head>
<body>
<form id="frm" action="">
  <input type="checkbox" name="modtype"  value="value1" onclick="showMe&#40;'div1', this&#41;">Show / Hide&#58; Content 1
  <input type="checkbox" name="modtype"  value="value2" onclick="showMe&#40;'div2', this&#41;">Show / Hide&#58; Content 2
  <input type="checkbox" name="modtype"  value="value3" onclick="showMe&#40;'div3', this&#41;">Show / Hide&#58; Content 3
  <div id="div1">DimSis was here #1</div>
  <div id="div2">Mpla mpla mpla #2</div>
  <div id="div3">I was hidden! #3</div>
</form>
</body>
</html>
demo: http://www.avadaz.com/playground/ShowHi ... eckbox.htm

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

onclick event

Δημοσίευση από quit » 16 Οκτ 2009 22:14

ναι ομως εδω πρεπει να ξανακανεις κλικ για να κρυφτει το div. δεν γινεται με το που κανεις κλικ σε ενα radio(οχι checkbox) να κρυβεται αυτο που φαινοταν και να εμφανιζεται αυτο που επιλέχθηκε?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

onclick event

Δημοσίευση από dimsis » 16 Οκτ 2009 22:54

Στα πιο γρήγορα αυτό κάνει δουλειά:

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Show hide multiple content when you click a radio</title>
<style type="text/css">
#div1, #div2, #div3 &#123; display&#58;none;&#125;
</style>
<script type="text/javascript"> 
<!--
function showMe &#40;id&#41; &#123;
	document.getElementById&#40;"div1"&#41;.style.display = "none";
	document.getElementById&#40;"div2"&#41;.style.display = "none";
	document.getElementById&#40;"div3"&#41;.style.display = "none";
	document.getElementById&#40;id&#41;.style.display = "block";
&#125;
//-->
</script>
</head>
<body>
<form id="frm" action="">
  <input name="modtype" type="radio" onclick="showMe&#40;'div1'&#41;"  value="value1">Show / Hide&#58; Content 1
  <input name="modtype" type="radio" onclick="showMe&#40;'div2'&#41;"  value="value2">Show / Hide&#58; Content 2
  <input name="modtype" type="radio" onclick="showMe&#40;'div3'&#41;"  value="value3">Show / Hide&#58; Content 3
  <div id="div1">DimSis was here #1</div>
  <div id="div2">Mpla mpla mpla #2</div>
  <div id="div3">I was hidden! #3</div>
</form>
</body>
</html>
αλλά σίγουρα γίνετε και καλύτερα...

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

onclick event

Δημοσίευση από quit » 16 Οκτ 2009 23:10

ευχαριστω κ παλι dimsis

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

onclick event

Δημοσίευση από korgr » 16 Οκτ 2009 23:22

Μιας και αρχισαμε να το "ψειριζουμε" Δημητρη, να προτεινω αυτη την τροποποιηση στην js function για να μην χρειαζεται να την αλλαζει οποτε προσθετει radio buttons & divs

Κώδικας: Επιλογή όλων

function showMe &#40;id&#41; &#123;
var counter=document.getElementsByClassName&#40;"myDiv"&#41;.length;
for&#40;$i=1; $i <= counter; $i++&#41;&#123;
document.getElementById&#40;"div"+$i&#41;.style.display = "none";
&#125;
document.getElementById&#40;id&#41;.style.display = "block";
&#125;
Αρκει βεβαια να προσθέτει σε ολα τα divs το class="myDiv" και να διατηρει την ονοματοδοσια των id στο div1, div2, ...div(n)

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

onclick event

Δημοσίευση από quit » 16 Οκτ 2009 23:48

korgr τι ακριβως κανει αυτό που εγραψες σε σχεση με το προηγουμενο του dimsis? το δοκιμασα αλλα σε ΙΕ δεν παιζει

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

onclick event

Δημοσίευση από korgr » 17 Οκτ 2009 00:52

Τιποτα μωρε ηταν μια προσπαθεια ωστε αν χρειαζεται να προσθεσεις και αλλα div + radio buttons να μην επεμβαινεις καθολου στην javascript
Ξεχασα ομως πως για να δουλεψει και στον IE η getElementsByClassName χρειαζεται custom αντιμετωπιση οποτε αστο...

Για την ιστορια χρειαζεται η getElementsByClassName του Robert Nyman:

Κώδικας: Επιλογή όλων

/*
	Developed by Robert Nyman, http&#58;//www.robertnyman.com
	Code/licensing&#58; http&#58;//code.google.com/p/getelementsbyclassname/
*/	
var getElementsByClassName = function &#40;className, tag, elm&#41;&#123;
	if &#40;document.getElementsByClassName&#41; &#123;
		getElementsByClassName = function &#40;className, tag, elm&#41; &#123;
			elm = elm || document;
			var elements = elm.getElementsByClassName&#40;className&#41;,
				nodeName = &#40;tag&#41;? new RegExp&#40;"\\b" + tag + "\\b", "i"&#41; &#58; null,
				returnElements = &#91;&#93;,
				current;
			for&#40;var i=0, il=elements.length; i<il; i+=1&#41;&#123;
				current = elements&#91;i&#93;;
				if&#40;!nodeName || nodeName.test&#40;current.nodeName&#41;&#41; &#123;
					returnElements.push&#40;current&#41;;
				&#125;
			&#125;
			return returnElements;
		&#125;;
	&#125;
	else if &#40;document.evaluate&#41; &#123;
		getElementsByClassName = function &#40;className, tag, elm&#41; &#123;
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split&#40;" "&#41;,
				classesToCheck = "",
				xhtmlNamespace = "http&#58;//www.w3.org/1999/xhtml",
				namespaceResolver = &#40;document.documentElement.namespaceURI === xhtmlNamespace&#41;? xhtmlNamespace &#58; null,
				returnElements = &#91;&#93;,
				elements,
				node;
			for&#40;var j=0, jl=classes.length; j<jl; j+=1&#41;&#123;
				classesToCheck += "&#91;contains&#40;concat&#40;' ', @class, ' '&#41;, ' " + classes&#91;j&#93; + " '&#41;&#93;";
			&#125;
			try	&#123;
				elements = document.evaluate&#40;".//" + tag + classesToCheck, elm, namespaceResolver, 0, null&#41;;
			&#125;
			catch &#40;e&#41; &#123;
				elements = document.evaluate&#40;".//" + tag + classesToCheck, elm, null, 0, null&#41;;
			&#125;
			while &#40;&#40;node = elements.iterateNext&#40;&#41;&#41;&#41; &#123;
				returnElements.push&#40;node&#41;;
			&#125;
			return returnElements;
		&#125;;
	&#125;
	else &#123;
		getElementsByClassName = function &#40;className, tag, elm&#41; &#123;
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split&#40;" "&#41;,
				classesToCheck = &#91;&#93;,
				elements = &#40;tag === "*" && elm.all&#41;? elm.all &#58; elm.getElementsByTagName&#40;tag&#41;,
				current,
				returnElements = &#91;&#93;,
				match;
			for&#40;var k=0, kl=classes.length; k<kl; k+=1&#41;&#123;
				classesToCheck.push&#40;new RegExp&#40;"&#40;^|\\s&#41;" + classes&#91;k&#93; + "&#40;\\s|$&#41;"&#41;&#41;;
			&#125;
			for&#40;var l=0, ll=elements.length; l<ll; l+=1&#41;&#123;
				current = elements&#91;l&#93;;
				match = false;
				for&#40;var m=0, ml=classesToCheck.length; m<ml; m+=1&#41;&#123;
					match = classesToCheck&#91;m&#93;.test&#40;current.className&#41;;
					if &#40;!match&#41; &#123;
						break;
					&#125;
				&#125;
				if &#40;match&#41; &#123;
					returnElements.push&#40;current&#41;;
				&#125;
			&#125;
			return returnElements;
		&#125;;
	&#125;
	return getElementsByClassName&#40;className, tag, elm&#41;;
&#125;;
Στην περιπτωση αυτη η function που ειχαμε γινεται:

Κώδικας: Επιλογή όλων

function showMe &#40;id&#41; &#123;
		var radiobuttons =getElementsByClassName&#40;"myDiv"&#41;.length;
		for&#40;$i=1; $i <= radiobuttons; $i++&#41;&#123;
				document.getElementById&#40;"div"+$i&#41;.style.display = "none";
		&#125;
   document.getElementById&#40;id&#41;.style.display = "block";
&#125;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

onclick event

Δημοσίευση από dimsis » 17 Οκτ 2009 09:33

Νότη όταν έγραψα "σίγουρα γίνετε καλύτερα" αυτό ακριβώς σκεφτόμουν :) Να μην χρειάζεται να αλλάζεις τον κώδικα για κάθε radio που θα προσθέτεις. Σίγουρα θα είναι καλύτερα έπειτα.

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

onclick event

Δημοσίευση από Banavas » 17 Οκτ 2009 09:43

Πάντως πολλές φορές και οι πρακτικοί έχουν καλύτερα αποτελέσματα από τους γιατρούς. Και λίγο πείραγμα στο script δεν πειράζει αμα σε γλυτώνει χρόνο κατά την δημιουργία. Άσε που πιθανόν να μην χρειαστεί ποτέ τροποποίηση στον αριθμό των radio buttons.
Happy coding....
Μάρκος
http://lasernet.gr

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες