Αλλαγή css με checkbox

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Silverthan
Δημοσιεύσεις: 114
Εγγραφή: 13 Ιουν 2004 13:43
Τοποθεσία: McLaren Technology Center
Επικοινωνία:

Αλλαγή css με checkbox

Δημοσίευση από Silverthan » 20 Φεβ 2013 12:01

Καλησπέρα παίδες,

Θέλω να κάνω κάτι πολύ απλό, να αλλάζω το style σε ένα span, ανάλογα με το status του checkbox. Εχω κάνει το εξής αλλά δεν δουλεύει :-?

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checlist</title>
<style type="text/css">
 
.ListItem1 &#123;
                text-decoration&#58;none ;
                color&#58;#000099;
&#125;
 
</style>
<script type="text/javascript">
if &#40;$&#40;'#ListItem'&#41;.is&#40;'&#58;checked'&#41;&#41; &#123;
    $&#40;".ListItem1"&#41;.style.textDecoration="line-through";
&#125; else &#123;
    $&#40;".ListItem1"&#41;.style.textDecoration="none";
&#125;
 
</script>
</head>
 
<body>

<ol>
 
<li>
<span class="ListItem1">Is this done?</span> <input type="checkbox" id="ListItem" name="ListItem" onchange="handler.call&#40;this&#41;"  />
</li>
 
<li>
allo ena edw 
</li>
 </ol>
 
</body>
</html>
Κάθε βοήθεια ευπρόσδεκτη :)

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Αλλαγή css με checkbox

Δημοσίευση από korgr » 20 Φεβ 2013 12:14

Για δοκίμασε έτσι...

Κώδικας: Επιλογή όλων


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http&#58;//www.w3.org/1999/xhtml"> 
<script src="http&#58;//code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Checlist</title> 
<style type="text/css"> 
  
.ListItem1 &#123; 
                text-decoration&#58;none ; 
                color&#58;#000099; 
&#125; 
  
</style> 
<script type="text/javascript"> 
function setStyle&#40;elm&#41;&#123; 
if &#40;$&#40;elm&#41;.is&#40;'&#58;checked'&#41;&#41; &#123; 
    $&#40;elm&#41;.prev&#40;&#41;.css&#40;'textDecoration', 'line-through'&#41;; 
&#125; else &#123; 
    $&#40;elm&#41;.prev&#40;&#41;.css&#40;'textDecoration', 'none'&#41;; 
&#125; 
&#125; 
  
</script> 
</head> 
  
<body> 

<ol> 
  
<li> 
<span class="ListItem1">Is this done?</span> <input type="checkbox" id="ListItem" name="ListItem" onchange="setStyle&#40;this&#41;"  /> 
</li> 
  
<li> 
allo ena edw 
</li> 
 </ol> 
  
</body> 
</html> 

Άβαταρ μέλους
Silverthan
Δημοσιεύσεις: 114
Εγγραφή: 13 Ιουν 2004 13:43
Τοποθεσία: McLaren Technology Center
Επικοινωνία:

Αλλαγή css με checkbox

Δημοσίευση από Silverthan » 20 Φεβ 2013 12:49

Ευχαριστώ πολύ korgr!

Δουλεύει τέλεια :):)

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες