Søg
Avatar billede jansangill Nybegynder
05. august 2007 - 19:21 Der er 9 kommentarer og
1 løsning

checkbox issues

Hej

Jeg har en masse checkboxes, som der kun må blive valgt en af.

Jeg bruger chekboxes istedet for radio buttons, da den ikke synes at sætte date ind vha radio. Men i checkbox sætter den value ind. Og hvis jeg bruger radio buttons skal de stadig have samme navn, da SQL skal vide hvilken data der skal sættes ind.

Her er java'en:

<script type="text/javascript">
<!--
    function checkUncheck(oImg, sChkId){
  var oChk = document.getElementById(sChkId);
  oChk.checked = !oChk.checked;
  oImg.src = (oChk.checked) ? "/web/grafik/checkbox_true.png" : "/web/grafik/checkbox_false.png";
}
//-->
</script>

Her er html:

img src="/web/grafik/checkbox_false.png" onclick="checkUncheck(this, 'chk')" /><input type="checkbox" id="chk" name="chk" style="display:none" value="1"/>
<img src="/web/grafik/checkbox_false.png" onclick="checkUncheck(this, 'chk2')" /><input type="checkbox" id="chk1" name="chk" style="display:none" value="2" />

<img src="/web/grafik/checkbox_false.png" onclick="checkUncheck(this, 'chk3')" /><input type="checkbox" id="chk2" name="chk" style="display:none" value="3"/>
<img src="/web/grafik/checkbox_false.png" onclick="checkUncheck(this, 'chk4')"/><input type="checkbox" id="chk3" name="chk" style="display:none" value="4" />
<img src="/web/grafik/checkbox_false.png" onclick="checkUncheck(this, 'chk5')"/><input type="checkbox" id="chk4" name="chk" style="display:none" value="5" />

Håber der er en nådig sjæl derude der kan jælpe.:)
Avatar billede jansangill Nybegynder
05. august 2007 - 19:21 #1
hjælpe*
Avatar billede jansangill Nybegynder
05. august 2007 - 21:57 #2
og når jeg bruger radio buttons og grupperer den med samme navn, så kan man stadig klikke på hver felt.
Avatar billede olebole Juniormester
06. august 2007 - 13:06 #3
<ole>

Skjuler du et felt med 'display:none', må det ikke optræde som det, W3C kalder en 'successful control' ... dvs, at den ikke må være at finde på serveren. Du kan f.eks. lægge billedet henover en radio - eller checkbox. Noget à la:

<div style="position:relative">
    <img style="position:absolute;left:0;top:0;z-index:2" src="/web/grafik/checkbox_false.png" onclick="checkUncheck(this, 'chk2')">
    <input type="checkbox" id="chk1" name="chk" style="width:1px;height:1px" value="2">
</div>

- og så er der ingen grund til at skrive XHTML-markup, da du slet ikke kan behandle form-elementer under XHTML. Forms bliver det først muligt at scripte mod i XHTML 2.0 - hvor XForms også indføres  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
06. august 2007 - 13:09 #4
- og i FF kan du såmænd lægge checkboksen ind i img-elementet med DOM(!!!) ... men det er naturligvis hamrende invalid kode og kræver en kraftig fucked-up browser, så det må jeg fraråde  ;o)
Avatar billede jansangill Nybegynder
06. august 2007 - 22:09 #5
hehe tak for rådene.

Kan du forklare mig hvordan jeg skal få lavet det sådan at man kun kan vælge en radio/check i samme katogori. Meningen er at jeg har 4 kategorier hvor brugeren kan aftjekke disse med 5 valgmuligheder i hver kategori, som vil skrive en værdi fra 1-5 til en database.

Jeg har prøvet at bruge samme navn ved radio, men ligeledes hjælper det, da billederne må gå ind og forstyrre det (på en eller anden måde).

jan
Avatar billede olebole Juniormester
06. august 2007 - 23:11 #6
Det her ser ud til at virke i mine browsere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.radioImg {
   
}
.hiddenRadio {
    width: 1px;
    height: 1px;
    visibility: hidden;
}
</style>
<script type="text/JavaScript">
function foo(oImg) {
    var aId = oImg.getAttribute("id").split("_");
    var aRadios = document.getElementsByName(aId[0]);
    for (var  i=0,j=aRadios.length; i<j; i++) {
        if (aRadios[i].checked) document.getElementById(aId[0]+"_"+i).setAttribute("src", "radio.gif");
    }
    document.getElementsByName(aId[0])[aId[1]].checked = true;
    document.getElementById(aId[0]+"_"+aId[1]).setAttribute("src", "radio_on.gif");
}
</script>
</head>
<body>

<form action="">
<div>Gnu A: <img class="radioImg" id="gnu_0" src="radio.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="gnu" type="radio" value="gnuA"></div>
<div>Gnu B: <img class="radioImg" id="gnu_1" src="radio_on.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="gnu" type="radio" value="gnuB" checked></div>
<div>Gnu C: <img class="radioImg" id="gnu_2" src="radio.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="gnu" type="radio" value="gnuC"></div>
<div>Gnu D: <img class="radioImg" id="gnu_3" src="radio.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="gnu" type="radio" value="gnuD"></div>
<hr>
<div>Hest A: <img class="radioImg" id="hest_0" src="radio.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="hest" type="radio" value="hestA"></div>
<div>Hest B: <img class="radioImg" id="hest_1" src="radio.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="hest" type="radio" value="hestB"></div>
<div>Hest C: <img class="radioImg" id="hest_2" src="radio_on.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="hest" type="radio" value="hestC" checked></div>
<div>Hest D: <img class="radioImg" id="hest_3" src="radio.gif" onclick="foo(this)">
        <input class="hiddenRadio" name="hest" type="radio" value="hestD"></div>
<button type="submit">TEST</button>
</form>

</body>
</html>
Avatar billede olebole Juniormester
06. august 2007 - 23:12 #7
Hmmmm ... kom egentlig aldrig til at bruge CSS-klassen 'radioImg' til noget  =)
Avatar billede jansangill Nybegynder
07. august 2007 - 18:56 #8
Det får lige en kigger det der. Tak for hjælpen olebole:) Send du bare et svar.
Avatar billede olebole Juniormester
07. august 2007 - 20:39 #9
Selvtak  ;o)
Avatar billede olebole Juniormester
07. august 2007 - 22:51 #10
- og tak for points  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »