0

我创建了一个 JavaScript onclick 函数。它在 Firfox 中运行良好。但在 chrome/IE 中，除非您第一次单击它，否则该功能正常工作。我的代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

function KeepCount() {

  var mytextbox = document.getElementById('onclickval1');
  var myform = document.getElementById('compare-meet');
  var inputElems = myform.getElementsByTagName("input");
  for (var i=0; i<inputElems.length; i++) {
    inputElems[i].onchange = function(){
        if(this.checked){

            mytextbox.value += this.value +",";
            s = document.getElementById("onclickval1").value;
            n = s.split(',').length;
            if (n > 5)
            {
                alert('Pick Just Four Please!')
                this.checked = false
                mytextbox.value = mytextbox.value.replace(this.value+",", "")
                document.comparepage; return false;
            }
            if (n < 3)
            {
                document.getElementById('compsend').disabled=true;
            }
            if (n > 2)
            {
                document.getElementById('compsend').disabled=false;
            }
        }else{
            mytextbox.value = mytextbox.value.replace(this.value+",", "");
            s = document.getElementById("onclickval1").value;
            n = s.split(',').length; 
            if (n < 3)
            {
                document.getElementById('compsend').disabled=true;
            }
            if (n > 2)
            {
                document.getElementById('compsend').disabled=false;
            }
        }
    }
  }
}
</script>
</head>

<body>
<form id="compare-meet" action="" name="comparepage" method="post">
<input id="onclickval1" type="text" value="" name="getval1" size="30">
<table id="datatable-1" class="views-table">
    <thead>
    <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="
                  ">
          <span id="compbutt"><input id="compsend" title="Select atleast 2 school to compare" disabled="" type="submit" value="Compare &amp; Meet" name="compare"></span>        </th></tr>
  </thead>

<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="views-row-first odd">
                  <td class="">
            <input onclick="KeepCount()" class="5353" id="compare" type="checkbox"  value="5353">          </td>
              </tr><tr class="even">
                  <td class="">
            <input onclick="KeepCount()" class="5357" id="compare" type="checkbox"  value="5357">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input onclick="KeepCount()" class="5533" id="compare" type="checkbox"  value="5533">          </td>
              </tr><tr class="even">
                  <td class="">
            <input onclick="KeepCount()" class="5793" id="compare" type="checkbox"  value="5793">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input onclick="KeepCount()" class="5563" id="compare" type="checkbox"  value="5563">          </td>
              </tr></tbody></table>
</form>
</body>
</html>
4

2 回答 2

1

该keepCount()方法用于注册更改事件处理程序，因此您需要在文档加载时执行它，而不是在单击输入元素时执行。

所以发生的情况是，当第一次点击发生时，没有onchange注册事件处理程序，所以它不会被触发，然后它会注册一个 onchange 事件。当第二次点击发生时，您注册了一个 onchange 事件处理程序，因此它被触发了
这个问题是当您继续执行KeepCount方法时，每次点击都会使onchangehabdler 触发多次

前任：

function KeepCount() {

    var mytextbox = document.getElementById('onclickval1');
    var myform = document.getElementById('compare-meet');
    var inputElems = myform.getElementsByTagName("input");
    for (var i=0; i<inputElems.length; i++) {
        inputElems[i].onchange = function(){
            if(this.checked){

                mytextbox.value += this.value +",";
                s = document.getElementById("onclickval1").value;
                n = s.split(',').length;
                if (n > 5)
                {
                    alert('Pick Just Four Please!')
                    this.checked = false
                    mytextbox.value = mytextbox.value.replace(this.value+",", "")
                    document.comparepage; return false;
                }
                if (n < 3)
                {
                    document.getElementById('compsend').disabled=true;
                }
                if (n > 2)
                {
                    document.getElementById('compsend').disabled=false;
                }
            }else{
                mytextbox.value = mytextbox.value.replace(this.value+",", "");
                s = document.getElementById("onclickval1").value;
                n = s.split(',').length; 
                if (n < 3)
                {
                    document.getElementById('compsend').disabled=true;
                }
                if (n > 2)
                {
                    document.getElementById('compsend').disabled=false;
                }
            }
        }
    }
}

window.onload = KeepCount;

并onclick="KeepCount()"从复选框中删除

演示：小提琴

于 2013-06-04T06:43:44.197 回答
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<form id="compare-meet" action="" name="comparepage" method="post">
<input id="onclickval1" type="text" value="" name="getval1" size="30">
<table id="datatable-1" class="views-table">
    <thead>
    <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="
                  ">
          <span id="compbutt"><input id="compsend" title="Select atleast 2 school to compare" disabled="" type="submit" value="Compare &amp; Meet" name="compare"></span>        </th></tr>
  </thead>

<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="views-row-first odd">
                  <td class="">
            <input class="5353" id="compare" type="checkbox"  value="5353">          </td>
              </tr><tr class="even">
                  <td class="">
            <input class="5357" id="Checkbox1" type="checkbox"  value="5357">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input  class="5533" id="Checkbox2" type="checkbox"  value="5533">          </td>
              </tr><tr class="even">
                  <td class="">
            <input class="5793" id="Checkbox3" type="checkbox"  value="5793">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input class="5563" id="Checkbox4" type="checkbox"  value="5563">          </td>
              </tr></tbody></table>
</form>
</body>
<script>
    function KeepCount() {
        var mytextbox = document.getElementById('onclickval1');
        var myform = document.getElementById('compare-meet');
        var inputElems = myform.getElementsByTagName("input");
        for (var i = 0; i < inputElems.length; i++) {
            inputElems[i].onchange = function () {
                if (this.checked) {

                    mytextbox.value += this.value + ",";
                    s = document.getElementById("onclickval1").value;
                    n = s.split(',').length;
                    if (n > 5) {
                        alert('Pick Just Four Please!')
                        this.checked = false
                        mytextbox.value = mytextbox.value.replace(this.value + ",", "")
                        document.comparepage; return false;
                    }
                    if (n < 3) {
                        document.getElementById('compsend').disabled = true;
                    }
                    if (n > 2) {
                        document.getElementById('compsend').disabled = false;
                    }
                } else {
                    mytextbox.value = mytextbox.value.replace(this.value + ",", "");
                    s = document.getElementById("onclickval1").value;
                    n = s.split(',').length;
                    if (n < 3) {
                        document.getElementById('compsend').disabled = true;
                    }
                    if (n > 2) {
                        document.getElementById('compsend').disabled = false;
                    }
                }
            }
        }
    }
    KeepCount();
</script>
</html>
于 2013-06-04T06:45:56.243 回答