Søg
Avatar billede kkd Nybegynder
10. februar 2004 - 12:20 Der er 27 kommentarer og
1 løsning

Ændre udseendet af en tjekboks

Hej...

Er det ikke muligt at ændre udseendet på en tjekboks, på samme måde som man kan med tekstbokse, og teksareas (style="border: ....;" osv.

/kkd :oD
Avatar billede roenving Novice
10. februar 2004 - 12:28 #1
Ikke ret meget, du kan sætte noget margin og padding, men det vil komme udenom ...
Avatar billede cms Nybegynder
10. februar 2004 - 12:40 #2
men du kan jo lave to billeder, som du udskifter..
Avatar billede kkd Nybegynder
10. februar 2004 - 12:47 #3
cms>> Altså et billede, der viser den ikke-afkrydsede boks, og når der så klikkes, udskiftes det med et billede af den afkrydsede boks....

Hvordan gøres det (kode tak!!!) :oD
Avatar billede hammerhead Nybegynder
10. februar 2004 - 12:48 #4
jeg ved ikke om brug af stylesheets kan klare det - Se evt. her: http://www.html.dk/scripts/css/00005/
Avatar billede nute Nybegynder
10. februar 2004 - 12:51 #5
du kan lave dine egne checkboxes ved hjælp af noget grafik eller ved hjælp af nogle layers.ved at bruge layers, kan du fx gøre:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
        .checkboxFrame
        {
            border:1px solid black;
            width:10px;
            height:10px;
            overflow:hidden;
        }
        .checkbox
        {
            font-size:16px;
            font-family:webdings;
            position:relative;
            top:-6px;
            left:-3px;
        }
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    function toggle( p_objCheckbox )
    {
        var objHidden = document.getElementById( p_objCheckbox.id + "hidden" );
        if( objHidden.value == "a" )
        {
            objHidden.value = "";
            p_objCheckbox.firstChild.innerHTML = "";
        }
        else
        {
            objHidden.value = "a";
            p_objCheckbox.firstChild.innerHTML = "a";
        }
    }
    //-->
    </script>
</head>

<body>
<form>
<div id="checkbox1" class="checkboxFrame" onclick="toggle(this);"><span class="checkbox"></span></div>
<input type="hidden" id="checkbox1hidden">
</form>
</body>
</html>

/nute
Avatar billede nute Nybegynder
10. februar 2004 - 12:54 #6
i mit eks, vil man så kunne fange om en checkbox er checked, efter en post, ved at hive værdien i 'checkbox1hidden' ud ... hvis værdien er 'a', så er den checked. man kan jo selvfølgelig sætte værdien til "true" eller "false" om dette giver mere mening, men hele humlen ligger i at 'p_objCheckbox.firstChild.innerHTML' skal være 'a', siden 'a' i fonten webdings, giver et "kryds"

/nute
Avatar billede nute Nybegynder
10. februar 2004 - 13:06 #7
hmm ... det så ikke så godt ud hvis man satte tekst efter checkboxen... denne er bedre:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <style>
        .checkboxFrame
        {
            border:1px solid black;
            width:10px;
            height:10px;
            overflow:hidden;
            font-family:webdings;
            font-size:12px;
            line-height:10px;
            text-indent:-2px;
            position:relative;
            top:-2px;
        }
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    function toggle( p_objCheckbox )
    {
        var objHidden = document.getElementById( p_objCheckbox.id + "hidden" );
        if( objHidden.value == "a" )
        {
            objHidden.value = "";
            p_objCheckbox.innerHTML = "";
        }
        else
        {
            objHidden.value = "a";
            p_objCheckbox.innerHTML = "a";
        }
    }
    //-->
    </script>
</head>
<body>
<form>
<span id="checkbox1" class="checkboxFrame" onclick="toggle(this);"></span>&nbsp;En checkbox<br>
<input type="hidden" id="checkbox1hidden">
</form>
</body>
</html>
Avatar billede kkd Nybegynder
10. februar 2004 - 13:29 #8
En lille fejl: man kan kun afkrydse boksen, hvis musen står på den 1 px tykke border!
Avatar billede nute Nybegynder
10. februar 2004 - 13:34 #9
nej ... den afkrydses når man klikker inden i den sorte firkant
Avatar billede kkd Nybegynder
10. februar 2004 - 13:35 #10
Ja da i hvert fald ikke hos mig!!!
Avatar billede kkd Nybegynder
10. februar 2004 - 13:38 #11
Hvis jeg skriver således (min side har sort baggrund, derfor den ændrede border-farve)
            border:1px solid #0000ff;
            background: #000000;
            width:10px;
            height:10px;
            overflow:hidden;
            font-family:webdings;
            font-size:12px;
            line-height:10px;
            text-indent:-2px;
            position:relative;
            top:-2px;
så virker det, når man klikker i kassen, men den hopper op og ned, hver gang mna klikker!
Avatar billede nute Nybegynder
10. februar 2004 - 13:52 #12
mit første eksempel hopper op og ned når man klikker på den. mit andre eksempel hopper ikke op og ned ... det var derfor jeg postet det ;-) (læg mærke til at du er nødt til at bruge hele koden .. ikke bare stumper af den)

jeg har også kun testet i IE, så hvis du kører en anden browser, så må du lige sige til

/nute
Avatar billede kkd Nybegynder
10. februar 2004 - 13:55 #13
Jeg bruger IE. Og det er kun når jeg har sat background-linien ind at den hopper.
Men er den linie der ikke, skal man ramme den (hos mig) blå border
Avatar billede kkd Nybegynder
10. februar 2004 - 14:00 #14
Det er kun når boksen skal krydses af, at man skal ramme kanten. Når krydset skal fjernes igen, kan man klikke i hele boksen - men så er markøren til gengæld heller ikke nogen pil, men en alm. tekstmarkør.
Avatar billede nute Nybegynder
10. februar 2004 - 14:11 #15
du kan ændre markøren ved at lægge til

cursor:default;

det er lidt underlig at den hopper op og ned når man klikekr på den, men det er jo strengt taget ikke nødvendig at angive baggrundsfarve på dit layer. din checkbox får den samme baggrundsfarve som baggrundsfarven på <body>

/nute
Avatar billede nute Nybegynder
10. februar 2004 - 14:24 #16
men jeg skal ikke ramme borderen .. jeg kan sagtens klikke indenfor ...

alternativt skal du prøve at lave det med billeder. det er lidt mere "stabilt" og ikke særlig afhængig af hvordan browseren renderer. se eksempel her:

http://www.xperimentum.com/xperten/463414/

/nute
Avatar billede kkd Nybegynder
10. februar 2004 - 20:16 #17
Det sidste forslag fik jeg til at virke.... svar hvis du vil have point!
Avatar billede nute Nybegynder
11. februar 2004 - 09:55 #18
goodie :o]

/nute
Avatar billede kkd Nybegynder
11. februar 2004 - 18:51 #19
Jeg har lige opdaget et lille problem når jeg bruger det eksempel du linker til:

Jeg har følgende felt i min formular
<input type="hidden" id="check1hidden">
men jeg får ikke nogen værdi med over i det .asp dokument, som jeg sender formularen til: request.form("check1hidden")
skulle den ikke have værdien "false" hvis tjekboksen ikke er krydset af og værdien "true" hvis den er krydset af?
Avatar billede nute Nybegynder
12. februar 2004 - 09:11 #20
læg på 'name' attribut. når du requester et formelement, så bruges 'name'. 'id' bruges mest til DOM.

det er derfor altid en god vane at bruge både 'name' og 'id' på sine elementer

;o]
Avatar billede nute Nybegynder
12. februar 2004 - 09:11 #21
<input type="hidden" id="check1hidden" name="check1hidden">
Avatar billede kkd Nybegynder
12. februar 2004 - 18:40 #22
det virker ikke. Den tager ikke værdien i "check1hidden" med over i asp dokumentet:

her er scriptet i head
    <script language="JavaScript" type="text/javascript">
    <!--
    function toggle( p_objImage )
    {
        var objHidden = document.getElementById( p_objImage + "hidden" );

        if( p_objImage.src.indexOf( "on.gif" ) > -1 )
        {
            p_objImage.src = "off.gif"
            if( objHidden )
            {
                objHidden.value = "false";
            }
        }
        else
        {
            p_objImage.src = "on.gif"
            if( objHidden )
            {
                objHidden.value = "true";
            }
        }
    }
    //-->
    </script>

og her er feltet i formularen
<form method="post" action="send2.asp" name="frm">
en masse andre felter.....
<input type="hidden" id="check1hidden" name"check1hidden">
flere felter....
</form>
Avatar billede kkd Nybegynder
12. februar 2004 - 19:20 #23
i formularen er der selvfølgelig også linien
<img src="off.gif" id="check1" width="11" height="11" alt="" border="0" onclick="toggle( this );">
der hvor billedet skal sidde!!!
Avatar billede nute Nybegynder
13. februar 2004 - 09:15 #24
kig på dit input felt ... der mangler et = efter name ;o]

<input type="hidden" id="check1hidden" name"check1hidden">

skal være

<input type="hidden" id="check1hidden" name="check1hidden">

/nute
Avatar billede kkd Nybegynder
13. februar 2004 - 16:41 #25
my bad
lighedtegnet er der også i mit script - det er ikke der fejlen ligger!
Avatar billede kkd Nybegynder
14. februar 2004 - 15:55 #26
Jeg har fundet ud af det. Linien
var objHidden = document.getElementById( p_objImage + "hidden" );
skulle være
var objHidden = document.getElementById( p_objImage.id + "hidden" );
Avatar billede kkd Nybegynder
14. februar 2004 - 15:55 #27
Hov, du havde jo svaret....
Avatar billede nute Nybegynder
14. februar 2004 - 21:02 #28
ahh ... undskyld ... kedelig lille "bug" fra mig :-|

tak for points

/nute
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
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bat file. Af johnnylassen i Andet programmering 4 23/04/202616:10 24/04/202609:43
Hjælp til Api.asmx Af lurup i Andet programmering 1 17/03/202609:27 17/03/202614:12
burgermenu til hjemmeside - hjælp! Af SabrinaL i Andet programmering 2 12/11/202514:10 02/12/202520:42
Hjælp til programmering af website Af hamdenlange i Andet programmering 16 17/08/202522:26 19/08/202515:53
Kan man registrere hvis folk lukker en side ned Af KurtG i Andet programmering 8 24/07/202513:06 28/07/202517:03
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
I går 17:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
I går 17:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
05/0810:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
White papers
Flere white papers »