1

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

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;
}
4

7 回答 7

4

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)
于 2013-05-21T21:02:30.287 回答
1

非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-21T21:10:52.823 回答
1

我的解决方案基于您的有用输入：

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-21T21:13:46.587 回答
1

您的脚本中有几个错误。

  • 您正在传递标签 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)" />
于 2013-05-21T21:15:08.747 回答
0

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

于 2013-05-21T21:01:38.890 回答
0

您没有在标签上设置颜色，而是在复选框上设置颜色。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-21T21:07:53.890 回答
0

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

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-21T21:08:40.433 回答