Notifikationer

Markér alle som læst Log ud

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
Å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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00

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