Onclick Checkbox text tonen/ keuze direct verwerken

Door Kees de braak op 04-11-2008 17:43

2.002 views

Ik heb momenteel het volgende beginseltje gemaakt.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title></title>

	<script type="text/javascript">
		  function showhide(obj,id) {
		  document.getElementById(id).style.display = (obj.checked ? '' : 'none');

		   };

	</script>

</head>

<body>

<input type="checkbox" name="camera" value="camera" onclick="showhide(this,'camex')">DEZE TEKST MOET VERANDEREN ALS DE CHECKBOX IS AANGEVINKT</br>


<ul id="camex" style="display: none;">
<div style="border: 1px solid #222222; marin: 6px; padding: 10px;">
hoii

</div>
</ul>


</body>
</html>

Echter de tekst naast het checkboxje moet veranderen als de checkbox is aangevinkt. Er verschijnt daaronder een tekst met uitleg.

Als het probleem hierboven gefixed is wil ik het zo maken dat als de checkbox wordt aangevinkt een cookie wordt geset om te onthouden dat de tekst uitgeklapt of ingeklapt is.

Kan iemand vertellen hoe ik dit kan toepassen en hoe ik die tekst kan veranderen bij het aanvinken?

Joren de Wit

04-11-2008 17:55


<html>
<head>
<script type="text/javascript">
function showhide(el)
{
	if(el.checked)
	{
		document.getElementById('temp').style.display = 'none';
		document.getElementById('uitleg').style.display = 'block';
	}
	else
	{
		document.getElementById('temp').style.display = 'block';
		document.getElementById('uitleg').style.display = 'none';
	}
}
</script>
</head>

<body>
<p>
	<input type="checkbox" name="..." onchange="showhide(this)" /><span id="temp">Deze tekst gaat weg</span>
</p>
<p id="uitleg" style="display: none">Deze tekst verschijnt</p>
</body>
</html>

Je eerst probleem zou je ongeveer zo aan kunnen pakken. Het komt er op neer dat je de tekst die moet verdwijnen ook in een element moet zetten waarvan je de display style kunt veranderen.

Voor je tweede probleem kun je javascript gebruiken om cookies te setten. Kijk eens naar deze link voor meer uitleg over cookies en javascript.

Reageren

Inloggen om te reageren