Javascript：更改複選框上的標籤背景顏色

我試圖在複選框的checked/unchecked狀態的基礎上，在表單中的每個複選框中更改標籤的背景顏色。到目前爲止，我已經改變了它的初始狀態，但它不會改變回來時，我取消：Javascript：更改複選框上的標籤背景顏色

的javascript：

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

HTML：

個

CSS：

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

來源

2013-05-21 user2219915

myLayer.checked === true –

雖然還有其他的語法錯誤，但它不會工作，主要是因爲您檢查您的標籤是否被選中，而不是輸入。 – Josh

我剛剛意識到（===而不是=），但它仍然不起作用 – user2219915

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

myLayer.checked = true

是一個賦值，而不是一個條件。

if (myLayer.checked = true)

是每一個評價爲

if (true)

而其他部分時間將永遠不會被執行。因此，將其更改爲：

if (myLayer.checked === true)

此外，你應該檢查輸入的，而不是爲層，它不具有任何checked屬性：

if (myLayer.childNodes[0].checked === true)

來源

2013-05-21 21:02:30 bwoebi

事實上'myLayer'是指標籤，而不是輸入。沒有檢查標籤的屬性。 – Josh

是的，我剛注意到它，會更新。 – bwoebi

@Josh剛剛修好了 – bwoebi

你缺少if語句等號.. 那是一個錯字錯誤或者是解決問題了嗎？

來源

2013-05-21 21:01:38 BeNdErR

你不設置上的顏色標籤，但在複選框上。 jQuery讓您輕鬆選擇/遍歷DOM元素（也有助於清理了很多不必要的ID），看到這個小提琴：

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');   
    } 
});

來源

2013-05-21 21:07:53 darma

當一個問題沒有被標記，並且沒有在代碼中使用jQuery時，你通常不應該使用jQuery。 – bwoebi

@bwoebi：好的，但是你看，你甚至一開始都沒有看到自己的錯誤。你只回答有關分配問題的問題。 OP有助於瞭解可以使代碼更易於下次閱讀和維護的工具。 – darma

我只是在說這個，因爲有些人已經對我說過這些;主要是我沒有問題;-) – bwoebi

除了「== '別人提到的錯字，你也在檢查標籤是否被檢查，而不是輸入。嘗試：

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/

來源

2013-05-21 21:08:40

非jQuery的路線。將第二個參數傳遞給你的statecheck函數。

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

和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/

來源

2013-05-21 21:10:52 rssllbrns

我的解決方案基於您有所幫助輸入：

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/

來源

2013-05-21 21:13:46 user2219915

你的腳本中有一些錯誤。

你傳入拉布勒ID和檢查labelId.checked這不不存在
您正在使用是否應==條件

你這是怎麼JS方法應該=看起來像

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)" />

來源

2013-05-21 21:15:08 JavaKB

Javascript：更改複選框上的標籤背景顏色

回答

相關問題