Javascript FF和IE

我有以下脚本。它只运行在铬。我无法选中或激活该复选框。我怎样才能让它在FF和IE中运行

<script type="text/javascript">
    function checkHoverButton() {
        var lis = document.getElementsByTagName('li');
        for( var i = 0, l = lis.length; i < l; i++ ) {
            lis[i].onclick = function() {

                var c = this.getElementsByTagName('input')[0];

                if ( c.checked ){
                    c.checked = 0;
                    this.style.background = 'white';    
                }
                else{
                    c.checked = 1;
                    this.style.background = '#eceff5';
                }
            };
        }
    }
</script>

<li class="friends-li">
  <span class="green">
     <input type="checkbox" value="<?php echo $value; ?>" id="form_friend_<?php echo $value; ?>" name="form[friend][]" />
  </span>
  <span class="pink">
    <img id="img_friend_<?php echo $value; ?>" src="">
  </span>
  <span class="blue">
    <label for="form_friend_<?php echo $value;?>" ><?php echo $label;?></label>
  </span>
</li>

函数checkHoverButton（）{
var lis=document.getElementsByTagName（'li'）；
对于（变量i=0，l=lis.length；i
首先，我假设您正在代码中的某个地方调用
checkHoverButton

问题是事件冒泡

当您单击复选框或标签时，基本上取消了操作。您需要确保没有单击这些元素

lis[i].onclick = function(e) {

    var clickedOn = (e.srcElement || e.target).nodeName;
    if(clickedOn==="INPUT"||clickedOn==="LABEL") return;     
    var c = this.getElementsByTagName('input')[0];

--编辑--

@埃帕斯卡雷罗的方法非常好

我举了个例子，也许会有帮助


var lis=document.getElementsByTagName（'li'），
checkHandler=函数（事件）{
event.stopPropagation（）；
},
clickHandler=函数（事件）{
var c=this.getElementsByTagName（'input'）[0]；
c、 onclick=checkHandler；
如果（c.勾选）{
c、 选中=0；
这个.classList.remove（'darker'）；
这个.classList.add（'white'）；
}否则{
c、 选中=1；
这个.classList.remove（'white'）；
这个.classList.add（'darker'）；
}
返回false；
};
对于（变量i=0，l=lis.length；i
您是否尝试将
c.checked
设置为正确的
true
和
false
？请告诉我们IE中出现了哪些问题…期望的行为是什么？IE/Firefox中有什么不起作用？我无法检查或激活复选框。0/1/true/false无论您单击复选框或标签，背景颜色都不会改变（因为
If
后面的代码不会被执行）。如果您在这些选项之外但在
li
中单击，则该选项有效。我认为它需要多一点逻辑性。我觉得自己很笨，但我想不出为什么没有设置复选框的选中状态。上面的基本想法，我想我的颜色顺序是正确的。仅供参考：我编辑代码是为了向你展示基本想法。是的，我发誓我做了类似的事情，但没有成功。但随着你的改变，它似乎起了作用。希望OP同意。是的，我认为这些颜色也是对的
lis[i].onclick = function(e) {

    var clickedOn = (e.srcElement || e.target).nodeName;
    var setState = clickedOn!=="INPUT" && clickedOn!=="LABEL";     
    var c = this.getElementsByTagName('input')[0];
    if (setState) {
        c.checked = !c.checked;
    }
    this.style.background = c.checked ? "#eceff5" : "#fff";
};

var lis = document.getElementsByTagName('li'),
      checkHandler = function(event){
           event.stopPropagation();
      },
      clickHandler = function (event) {
            var c = this.getElementsByTagName('input')[0];
                  c.onclick = checkHandler;
            if (c.checked) {
                  c.checked = 0;
                  this.classList.remove('darker');
                  this.classList.add('white');
            } else {
                  c.checked = 1;
                  this.classList.remove('white');
                  this.classList.add('darker');
            }
            return false;
      };

for (var i = 0, l = lis.length; i < l; i++) {
      lis[i].onclick = clickHandler;
}