Javascript：更改复选框上的标签背景颜色

Posted 2023-02-21

【中文标题】Javascript：更改复选框上的标签背景颜色

【英文标题】：Javascript: Change label background color on checkbox

【发布时间】：2013-05-16 18:32:54

【问题描述】：

我正在尝试根据复选框的选中/未选中状态更改表单中每个复选框中标签的背景颜色。到目前为止，我最初是更改它，但是当我取消选中它时它不会变回来：

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

虽然还有其他语法错误，但它不起作用主要是因为您检查的是标签是否被检查，而不是输入。

我刚刚意识到（=== 而不是=），但它仍然不起作用

@Josh 有没有办法检查孩子（复选框）是否被选中？

@user2219915 看看我的回答...

【参考方案1】：

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

myLayer.checked = true

是一个赋值，而不是一个条件。

if (myLayer.checked = true)

每次都被评估为

if (true)

else 部分永远不会被执行。所以改成：

if (myLayer.checked === true)

此外，您应该检查输入，而不是检查没有任何检查属性的图层：

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

【讨论】：

事实上myLayer 指的是标签，而不是输入。标签没有checked属性。

【参考方案2】：

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

【参考方案3】：

我的解决方案基于您的有用意见：

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/

【参考方案4】：

您的脚本中有几个错误。

您正在传递标签 ID 并检查 labelId.checked 不存在 您在 if 条件中使用 =，应该是 ==

这就是你的 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)" />

【参考方案5】：

您在 if 语句中缺少等号。 这是拼写错误还是您的问题的解决方案？

【参考方案6】：

您没有在标签上设置颜色，而是在复选框上设置颜色。 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');        
    
);

【讨论】：

当一个问题没有用它标记并且代码中没有使用 jQuery 时，你通常不应该使用 jQuery。

@bwoebi ：好的，但是你看，一开始你自己甚至都没有看到错误。你一开始只回答了分配问题。了解可以使他们的代码在下次更易于阅读和维护的工具对 OP 来说是有益的。

我这么说只是因为有些人已经对我说过了；主要是我没有问题;-)

是的，谢谢，为此尽量避免使用 jQuery。它会让生活变得轻松，但我不能将它用于这个特定的项目。

【参考方案7】：

除了其他人提到的'=='错字之外，您还在检查标签是否被检查而不是输入。试试：

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/