-1

次のスクリプトがあります。Chromeでのみ実行されています。チェックボックスをオンにすることも、有効にすることもできません。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>
4

2 に答える 2

3

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];

- 編集 - 

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";
};
于 2013-04-11T19:17:19.420 に答える
1

@epascarelloのアプローチはとても良いです。

私は例を作りました、多分それは助けます。

JSFiddle

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;
}
于 2013-04-11T19:35:30.267 に答える