Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Checkbox opmaak (Opgelost)

Tomgeen - 01/12/2011 09:32
Lid		Hey, Ik heb een vraagje over checkboxen. Wat ik heb is een lijst met checkboxen en daar achter een item beschrijving. Als ik een van de items wil selecteren dan kan dat alleen door de op de checkbox te klikken. Wat ik wil is dat als ik op de tekst klik dat de checkbox dan ook aangevinkt wordt. En wat nog mooier zou zijn (maar niet noodzakelijk) is door in een bepaald gebied te klikken (net als bij een hover effect). Weet iemand hoe ik dit moet maken? Bvd, Tom

3 antwoorden

Gesponsorde links

Pieter - 01/12/2011 09:52
SEO guru		Geef je checkbox een label.

Ontani - 01/12/2011 09:52

-1

Voorbeeld op: http://dl.dropbox.com/u/79192/tomgeen.html

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<title>Tomgeen - Checkbox</title>

<style type="text/css">

#labelFive, #labelSix, #labelSeven {
	display: block;
	width: 100px;
	height: 65px;
	border: 1px solid #ccc;
	cursor: pointer;
	margin; 10px;
	padding-top: 35px;
	text-align: center;
}

#labelFive {
	background-color: red;
	position: absolute;
	top: 250px;
	left: 250px;
}

#labelSix {
	background-color: yellow;
	position: absolute;
	top: 400px;
	left: 50px;
}

#labelSeven {
	background-color: pink;
	position: absolute;
	top: 600px;
	left: 600px;
}

</style>

</head>
<body>

<h3>Tekst naast checkbox kan aangeklikt worden</h3>

	<form action="" method="post">
		<input type="checkbox" name="chkOne" id="chkOne" /> <label for="chkOne">dit is de eerste checkbox</label><br/>
		<input type="checkbox" name="chkOne" id="chkTwo" /> <label for="chkTwo">dit is de tweede checkbox</label><br/>
		<input type="checkbox" name="chkOne" id="chkThree" /> <label for="chkThree">dit is de derde checkbox</label><br/>
		<input type="checkbox" name="chkOne" id="chkFour" /> <label for="chkFour">dit is de vierde checkbox</label>
	</form>

<h3>Gebied kan aangeklikt worden</h3>

	<form action="" method="post">
		<input type="checkbox" name="chkFive" id="chkFive" /> Vijfde<br/>
		<input type="checkbox" name="chkSix" id="chkSix" /> Zesde<br/>
		<input type="checkbox" name="chkSeven" id="chkSeven" /> Zevende<br/>
		
		<label for="chkFive" id="labelFive">Vijf</label>
		<label for="chkSix" id="labelSix">Zes</label>
		<label for="chkSeven" id="labelSeven">Zeven</label>
	</form>
	
</body>
</html>

<html>
<head>
<title>Tomgeen - Checkbox</title>
 
<style type="text/css">
 
#labelFive, #labelSix, #labelSeven {
	display: block;
	width: 100px;
	height: 65px;
	border: 1px solid #ccc;
	cursor: pointer;
	margin; 10px;
	padding-top: 35px;
	text-align: center;
}
 
#labelFive {
	background-color: red;
	position: absolute;
	top: 250px;
	left: 250px;
}
 
#labelSix {
	background-color: yellow;
	position: absolute;
	top: 400px;
	left: 50px;
}
 
#labelSeven {
	background-color: pink;
	position: absolute;
	top: 600px;
	left: 600px;
}
 
</style>
 
</head>
<body>
 
<h3>Tekst naast checkbox kan aangeklikt worden</h3>
 
	<form action="" method="post">
		<input type="checkbox" name="chkOne" id="chkOne" /> <label for="chkOne">dit is de eerste checkbox</label><br/>
		<input type="checkbox" name="chkOne" id="chkTwo" /> <label for="chkTwo">dit is de tweede checkbox</label><br/>
		<input type="checkbox" name="chkOne" id="chkThree" /> <label for="chkThree">dit is de derde checkbox</label><br/>
		<input type="checkbox" name="chkOne" id="chkFour" /> <label for="chkFour">dit is de vierde checkbox</label>
	</form>
 
<h3>Gebied kan aangeklikt worden</h3>
 
	<form action="" method="post">
		<input type="checkbox" name="chkFive" id="chkFive" /> Vijfde<br/>
		<input type="checkbox" name="chkSix" id="chkSix" /> Zesde<br/>
		<input type="checkbox" name="chkSeven" id="chkSeven" /> Zevende<br/>
 
		<label for="chkFive" id="labelFive">Vijf</label>
		<label for="chkSix" id="labelSix">Zes</label>
		<label for="chkSeven" id="labelSeven">Zeven</label>
	</form>
 
</body>
</html>

Bedankt door: Tomgeen

Tomgeen - 01/12/2011 10:09
Lid		Is precies wat ik zocht. Bedankt!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten