Hel div som sjekkboks/radio

[Thomas.]

Hei,

 

prøver få til at når man trykker i diven markerer checkboxen/radio'n seg.

 

Dette er hva jeg har til nå:

<style type="text/css">
#dd {
border:0 solid;
	background:#ff0000; 
	display:block; 
	height:20px;
	width:100px;
	text-align:left;
}
#dd:hover {
cursor:pointer;
background:#000;
}
</style>

<script type="text/javascript">
<!--
window.onload=function() {
document.getElementById('dd').onclick=function() {
	document.getElementById('x').checked = true;
}
}
//-->
</script>

<form>
<div id="dd">
	<input id="x" type="radio" name="1" />
</div>
<div id="dd">
	<input id="x" type="radio" name="1" />
</div>
</form>

 

Da fungerer kun den øverste diven.

Om jeg bytter til checkbox fungerer det ikke unchecke boksen ved å trykke på diven.

 

Noen som har forslag til løsning?

[Warz]

....... nvm

Endret 5. september 2010 av Warz

[dabear]

Du kan ikke ha to elementer i html som har samme id. Du må gi de forskjellige ID-er. Når det er gjort, må du kjøre samme kode flere ganger, men der du varierer input til document.getElementById.

 

Dette kan du gjøre enten ved å kopiere og lime inn koden du har nå, eller ved å kjøre den koden du har nå i ei løkke.

 

her er koden for å unchecke/checke et element annenhver gang:

 

document.getElementById('etelement').checked = !document.getElementById('etelement').checked;

 

dette kan også skrives kortere, slik:

var element = document.getElementById('etelement');
element.checked = !element.checked;

 

Les gjennom posten min noen ganger, slik at du forstår hva du skal gjøre; ikke forvent at noen her skal gi deg koden du trenger direkte, uten at du må gjøre en innsats sjøl

[Thomas.]

Gjorde det bare litt enklere

 

<style type="text/css">
label {
	border:0 solid;
	background:#ff0000;
	display:block;
	height:20px;
	width:100px;
	text-align:left;
}
label:hover {
	cursor:pointer;
	background:#000;
}
</style>

<form>

<label><input id="h" type="radio" name="2" /></label>
<label><input id="h" type="radio" name="2" /></label>
<label><input type="checkbox" /></label>
<label><input type="checkbox" /></label>

</form>