Javascript: Ändern Sie hintergrund-Farbe auf das Kontrollkästchen

Ich versuche, ändern Sie die Hintergrundfarbe eines label in jeder checkbox in einem Formular basierend auf den checked/unchecked-Zustand der checkbox.So weit habe ich es zu ändern zunächst, aber es wird sich nicht ändern wieder, wenn ich deaktivieren:

http://jsfiddle.net/7wnCL/4/

javascript:

function statecheck(layer) {
var myLayer = document.getElementById(layer);
 if(myLayer.checked = true){
 myLayer.style.backgroundColor = "#bff0a1";
 } else {
 myLayer.style.backgroundColor = "#eee";
 };
}

html:

<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>

css:

label {
margin:0px 2px 4px 2px; 
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}

myLayer.checked === true
Zwar gibt es andere syntaktische Fehler, es wird nicht funktionieren, vor allem, weil Sie überprüft haben, wenn Ihr label ist geprüft, nicht der input.
Ich habe gerade festgestellt, dass (=== statt =), aber es funktioniert immer noch nicht
gibt es eine Möglichkeit zu überprüfen, ob das Kind (die checkbox) aktiviert ist?
Schauen Sie sich meine Antwort...

InformationsquelleAutor user2219915 | 2013-05-21

4

http://jsfiddle.net/7wnCL/20/
```
myLayer.checked = true
```
ist eine Aufgabe, nicht ein Zustand.
```
if (myLayer.checked = true)
```
wird jedes mal ausgewertet, wie
```
if (true)
```
- Und der else-Teil wird nie ausgeführt werden. So ändern Sie es:
```
if (myLayer.checked === true)
```
Außerdem sollten Sie prüfen, die für die Eingabe und nicht für die Schicht, die keine checked-Eigenschaft:
```
if (myLayer.childNodes[0].checked === true)
```
Und die Tatsache myLayer bezieht sich auf das Etikett, und nicht die Eingabe. Es gibt keine checked-Eigenschaft der label.
ja, ich habe es bemerkt, wird aktualisiert.
nur Feste
Ich kam auf die gleiche Lösung, danke!

InformationsquelleAutor bwoebi

die nicht-jQuery-route. übergeben Sie einen zweiten Parameter, um Ihre statecheck Funktion.

 <label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck(this,'AmericanSamoa')" />AS</label>

und die javascript -

 function statecheck(chk, layer) {
var myLayer = document.getElementById(layer);
//myLayer.style.backgroundColor = "#bff0a1";
if(chk.checked === true){
    myLayer.style.backgroundColor = "#bff0a1";
    } else {
    myLayer.style.backgroundColor = "#eee";
    }
}

http://jsfiddle.net/7wnCL/4/

InformationsquelleAutor rssllbrns

Meine Lösung, basierend auf Ihren hilfreichen input:

function statecheck(layer) {
var myLayer = document.getElementById(layer);
//myLayer.style.backgroundColor = "#bff0a1";
if(myLayer.childNodes[0].checked === true){
    myLayer.style.backgroundColor = "#bff0a1";
    } else {
    myLayer.style.backgroundColor = "#eee";
};

}

http://jsfiddle.net/7wnCL/29/

InformationsquelleAutor user2219915

Es gibt einige Fehler in Ihrem Skript.

Sie auf der Durchreise sind lable-id und Prüfung für labelId.geprüft die nicht
nicht vorhanden
Sie mit = in der if-Bedingung werden sollten ==

Dies ist, wie Sie JS-Methode Aussehen sollte

function statecheck(layer, checkbox) {
    var myLayer = document.getElementById(layer);
    //myLayer.style.backgroundColor = "#bff0a1";
    if(checkbox.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };

}

HTML

<input type="checkbox" value="checkbox" onchange="statecheck('Alabama', this)" />

InformationsquelleAutor JavaKB

0

Ihnen fehlt ein Gleichheitszeichen in der if-Anweisung..
Ist das ein typo-Fehler oder ist die Lösung zu deinem problem?

InformationsquelleAutor BeNdErR
0

Ihre nicht-Einstellung der Farbe auf dem Etikett, sondern auf die checkbox.
jQuery macht es einfach für Sie zu wählen /traverse DOM-Elemente (und auch hilft, clean-up eine Menge unnötiger IDs) finden Sie in diesem fiddle :

http://jsfiddle.net/7wnCL/17/
```
$('input[type=checkbox]').change(function(){
    if($(this).prop('checked')){   
        $(this).parent().css('backgroundColor', '#bff0a1');
    }else{
        $(this).parent().css('backgroundColor', '#eee');        
    }
});
```
Sie sollten generell nicht die Verwendung von jQuery, wenn eine Frage nicht markiert mit und ohne jQuery ist im code verwendet.
Ok, aber sehen Sie, Sie gar nicht sehen, die Fehler selbst auf den ersten. Sie sagten nur über die Zuordnung problem zu beginnen. Es kann vorteilhaft sein, um die OP zu lernen über tools, die Ihren code leichter zu Lesen und zu verwalten, die nächste Zeit.
Ich bin nur sage das, weil einige Leute bereits gesagt, dies für mich; grundsätzlich habe ich kein problem mit 😉
Yup, danke, versucht zu vermeiden, jQuery. Es würde das Leben leicht machen, aber ich kann es nicht verwenden für dieses Projekt.

InformationsquelleAutor darma

Neben dem '==' Tippfehler von anderen erwähnt, sind Sie auch zu prüfen, ob die label aktiviert ist, anstatt der Eingabe. Versuchen:

function statecheck(layer) {
    var myLayer = document.getElementById(layer),
        input = myLayer.getElementsByTagName('input')[0];
    //myLayer.style.backgroundColor = "#bff0a1";
    if(input.checked == true){
        myLayer.style.backgroundColor = "#bff0a1";
        } else {
        myLayer.style.backgroundColor = "#eee";
    };
}

jsFiddle: http://jsfiddle.net/7wnCL/26/

InformationsquelleAutor Rob Johnstone

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.