CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

smaakagemorten Nybegynder

12. februar 2013 - 08:51 Der er 4 kommentarer og
1 løsning

Krydse af i en checkbox og så tilføje en class

Nu er jeg rimelig nybegynder til javascript og jquery, men jeg har en liste med forskellige ting, hvor der skal komme en lang streg henover den når man checkboxen er checked.

Jeg kan godt få den til at tilføje en class til alle checkboxene, men jeg kan ikke få den til at tilføje en class til den label som den tilhører, er der nogen der kan hjælpe med det?

Det hele skal jo gøres dynamisk, fordi man skal kunne tilføje og slette punkter, så jeg kan jo ikke sidde og tilføje lidt javascript til hvert nyt menupunkt.

--
Morten

Synes godt om

smaakagemorten Nybegynder

12. februar 2013 - 08:53 #1

HTML:

<form>
<div>
<input type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>

Mit jquery ser sådan ud indtil videre:

<script>
$( "input[type=checkbox]" ).click(function () {
$( "label[for='banana']" ).each(function(){
$( this ).toggleClass( "red" );
});
});
</script>

Synes godt om

jakobdo Ekspert

12. februar 2013 - 09:48 #2

Tror du skal ud i noget ala:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox</title>
<meta charset="utf-8">
<style>
label.red {background-color:red;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$( "input:checkbox" ).click(function(){
selected = $(this).prop("checked");
if(selected){
$(this).next().addClass("red");
}else{
$(this).next().removeClass("red");
}
});
});
</script>
</head>
<body>
<form>
<div>
<input type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>
</body>
</html>

Synes godt om

smaakagemorten Nybegynder

12. februar 2013 - 09:55 #3

Jamen fantastisk! Det var lige det jeg ledte efter. Jeg lærer godt nok noget nyt hele tiden med det her javascript :P

Synes godt om

jakobdo Ekspert

12. februar 2013 - 09:57 #4

Og min js er bestemt ikke perfekt og nogle vil sige jquery aldrig bliver perfekt. Men det virker. :o)

Takker for point.

Synes godt om

olebole Juniormester

12. februar 2013 - 19:50 #5

<ole>

Uden jQuery kan det skrives:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox</title>
<meta charset="utf-8">
<style>
label.red {background-color:red;}
</style>
<script>
function setLabel(evnt) {
var elm = document.elementFromPoint(evnt.clientX, evnt.clientY);
if (elm.nodeName==="INPUT" && elm.type==="checkbox") {
while (elm.nodeName!=="LABEL") elm = elm.nextSibling;
}
if (elm.nodeName!=="LABEL") return;
elm.className = document.getElementById(elm.htmlFor).checked ? "red" : "";
}
</script>
</head>
<body onclick="setLabel(event)">
<form>
<div>
<input type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>
</body>
</html>

- hvilket er giver mulighed for at lære 'ren' JavaScript/DOM uden jQuery's proprietære syntaks =)

/mvh
</bole>

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS

30/08

Test af Tesla Model 3 Performance: Aldrig har man fået så meget sportsvogn til så få penge

30/08

Dell vil frasælge cybersikkerhedsfirma efter flere forfejlede forsøg

30/08

Danmarks to store it-styrelser skal reduceres markant: Skal samlet sige farvel til hver fjerde stilling i de kommende år

30/08

Nørgaards kæmpe-comeback: ENDELIG får vi et ministerium for civilforsvar - og et ægte digitaliseringsministerium UDEN ligestilling

30/08

Du kan score op til 1,7 millioner kroner på at finde en enkelt sårbarhed

30/08

Nu når en af Danmarks helt store GDPR-retssager til vejs ende: Står over for bødekrav på 800.000 kroner

30/08

CrowdStrike med første regnskab efter globalt nedbrud: Har kostet selskabet 800 millioner kroner

30/08

Regeringen vil reducere bevilling til Datatilsynet med millioner: Skal bruge væsentligt færre penge på løn og tilsyn

30/08

Selskab med 40.000 ansatte dropper VMware efter ballade - vælger anden løsning

30/08

Politiet klar til at skrive kontrakt på nyt dansk fingeraftrykssystem frem til 2035: Leverandøren er fundet - nu mangler blot pengene

30/08

Utopi eller dystopi? Derfor er kunstig intelligens et tveægget sværd

Vis flere artikler

IT-JOB

AK Techotel A/S

Systemudvikler søges til innovativt firma, med godt arbejdsmiljø og mulighed for

Accuratech ApS

Softwareprojektleder søges til digitalisering af fødevare- og fremstillingsindustrien

Teknologisk Institut

Specialist inden for præcisionslandbrug og maskintest

Udviklings- og Forenklingsstyrelsen

Har du lyst til at arbejde med de nyeste teknologier inden for PostgreSQL databaser og driftsautomatisering i en stor koncern?

Rambøll Management Consulting

Early Talent Software Engineer @ Ramboll Stakeholder Intelligence

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 23:37	Poe strøm Af lurup i LAN/WAN
I går 14:46	GIF-EDITOR Af snestrup2000 i Billedbehandling
I går 14:03	Logge ind Af Bob i PC
I går 12:12	2 skærme - 1 virker - den anden siger No signal Af eksmojo i Skærme
I går 10:33	openvpn projekt Af dcedata1977 i Windows