checkbox med billeder

Skal billedet være checkboxen?

Evt.:

<script type="text/javascript">
function checkImage(o1,o2){
  o2=document.getElementsByTagName(o2);
  if(o2.getAttribute("checked")){
    o1.setAttribute("src","billed1.bmp");
    o2.setAttribute("checked",true);
  }else{
    o1.setAttribute("src","billed2.bmp");
    o2.setAttribute("checked",false);
  }
}
</script>

<img src="billed1.bmp" onclick="checkImage('checkbox1')">
<input style="display:none" type="checkbox" id="checkbox1" name="checkbox1">

tænker på som denne på me.com

Ja! Præcis som min kode. :)

Koden skulle så være således:

<script type="text/javascript">
function checkImage(o1,o2){
  o2=document.getElementById(o2);
  if(o2.getAttribute("checked")){
    o1.setAttribute("src","billed1.bmp");
    o2.setAttribute("checked",true);
  }else{
    o1.setAttribute("src","billed2.bmp");
    o2.setAttribute("checked",false);
  }
}
</script>

<img src="billed1.bmp" onclick="checkImage(this,'checkbox1')">
<input style="display:none" type="checkbox" id="checkbox1" name="checkbox1">

Sådan her: =)

<script type="text/javascript">
function checkImage(o1,o2){
  o2=document.getElementById(o2);
  if(o2.getAttribute("checked")){
    o1.setAttribute("src","billed1.bmp");
    o2.setAttribute("checked",false);
  }else{
    o1.setAttribute("src","billed2.bmp");
    o2.setAttribute("checked",true);
  }
}
</script>

<img src="billed1.bmp" onclick="checkImage(this,'checkbox1')">
<input style="display:block" type="checkbox" id="checkbox1" name="checkbox1">

<ole>

w13 >> Husk, at dynamiske properties ikke må kunne aflæses med getAttribute metoden. Det gælder f.eks. 'checked'  ;o)
    if(o2.checked){

/mvh
</bole>

Ja, det er også rigtigt:

<script type="text/javascript">
function checkImage(o1,o2){
  o2=document.getElementById(o2);
  if(o2.checked){
    o1.setAttribute("src","billed1.bmp");
    o2.setAttribute("checked",false);
  }else{
    o1.setAttribute("src","billed2.bmp");
    o2.setAttribute("checked",true);
  }
}
</script>

Der ser ud til det virker den første gange men så ikke hvis man klikker den fra og til flere gange

Nej, jeg havde kun testet den i IE. Således:

<script type="text/javascript">
function checkImage(o1,o2){
  o2=document.getElementById(o2);
  if(o2.checked){
    o1.setAttribute("src","billed1.bmp");
    o2.setAttribute("checked",false);
    o2.removeAttribute("checked");
  }else{
    o1.setAttribute("src","billed2.bmp");
    o2.setAttribute("checked","true");
  }
}
</script>

o2.checked = true;

- men:

o2.setAttribute("checked","checked");  ;o)

Forklaring: I HTML-DOM tager vi fat i et JavaScript objekt med forskellige properties - repræsenterende HTML elementet. Hvis vi spørger på checked property'en, kan denne enten være true eller false:
  if (oElement.checked) { /* Elementet er valgt */ };

Vi kan også sætte checked property'en til enten true eller false med HTML-DOM:
    oElement.checked = false;

Med DOM metoderne set- og getAttribute tager vi fat i DOM-noden og sætter/aflæser, hvad der står skrevet i attributten i HTML koden.
Ifølge XHTML standarden kan checked attributten have én værdi: 'checked' - ifølge HTML standarden skal dens navn blot være tilstede i tagget. Er attributten til stede i tagget, skal elementet antage sin checked tilstand. Er den ikke tilstede, skal elementet antage sin normal tilstand.

Derfor giver det ikke mening at bruge:
    oElement.setAttribute("checked", "false");

Man bør i stedet bruge:
    oElement.attributes.removeNamedItem("checked");

- eller:
    oElement.removeAttribute("checked");

- eller med 'den gamle' HTML-DOM:
    oElement.checked = false;

Det er derfor IE, som opfører sig korrekt i denne situation  =)