2012-02-10 58 views
0

我瀏覽過很多帖子都無濟於事。我有一個簡單的表單,其中一個產品的變化取決於複選框的數量。它適用於除IE以外的所有瀏覽器。我究竟做錯了什麼?Javascript Internet Explorer問題 - 我做錯了什麼?

<body> 
<script type="text/javascript"> 
function check(){ 
"use strict"; 
var count = 0, x=0, checkboxes=document.signup.getElementsByClassName("styled"); 
for(;x<checkboxes.length; x++){ 
    if(checkboxes[x].checked){ 
     count++; 
    } 
} 
if(count<3) { 
    document.getElementById("variable").value = "1"; 
} 
else if (count == 3){ 

    document.getElementById("variable").value = "74"; 
} 
else if (count == 4){ 

    document.getElementById("variable").value = "75"; 
} 
else if (count == 5){ 

    document.getElementById("variable").value = "76"; 
} 

} 
</script> 
<form name="signup" id="signup" method="post" action="/subscribers/signup.php"> 
<input type="checkbox" id="variable" name="product_id[]" value="" class="styled"></input>product 1 - variable</div> 
<input type="checkbox" id="same" name="product_id[]" value="3" class="styled"></input>product 2 
<input type="checkbox" id="same2" name="product_id[]" value="2" class="styled"></input>product 3 
<input type="checkbox" id="same3" name="product_id[]" value="4" class="styled"></input><div class="check-title">product 4 
<input type="checkbox" id="same4" name="product_id[]" value="44" class="styled"></input><div class="check-title">product 5   
<a href="#" id="submit" onClick="check()">Continue</a></td></tr> 
</form> 
</body> 
+0

Internet Explorer ;-)開個玩笑。 – skippr 2012-02-10 01:33:06

+1

「我做錯了什麼?」 - 不使用IE開發人員工具檢查Javascript錯誤消息,或在腳本中設置斷點。一個[小提琴](http://jsfiddle.net/)讓人們快速測試你的代碼也會很棒。另外,解釋你提到的「作品」和「不起作用」。 – millimoose 2012-02-10 01:33:15

+0

謝謝你的小提琴鏈接。我會在下一次做。對於這一切,我還是比較陌生的。 – discerninc 2012-02-10 02:09:22

回答

-1

IE可是沒有方法getElementsByClassName方法......你可以嘗試去定義它:

if(document.getElementsByClassName == undefined) { 
    document.getElementsByClassName = function(cl) { 
     var retnode = []; 
     var myclass = new RegExp('\\b'+cl+'\\b'); 
     var elem = this.getElementsByTagName('*'); 
     for (var i = 0; i < elem.length; i++) { 
     var classes = elem[i].className; 
     if (myclass.test(classes)) { 
      retnode.push(elem[i]); 
     } 
     } 
     return retnode; 
    } 
}; 
+0

這對OP不起作用,因爲它們不是在文檔對象上調用'getElementsByClassName()',而是在DOM中的另一個對象上調用。 – jfriend00 2012-02-10 01:41:08

+0

什麼是OP?... – Skay 2012-02-10 02:24:57

0

所有版本的IE之前IE9不支持getElementsByClassName()。你需要使用某種替代品。

相反這一塊你的代碼的:

checkboxes = document.signup.getElementsByClassName("styled"); 

我會建議使用此:

checkboxes = document.getElementById("signup").getElementsByTagName("input") 

getElementsByTagName()是廣泛存在於IE瀏覽器的所有版本都支持。這顯然會得到所有input標籤,但只有複選框將有checked設置,所以你應該沒問題。

如果你需要通過類來過濾,那麼你可以做整個事情是這樣的:「什麼?我做錯了」

function check() { 
    "use strict"; 

    // initialize checkbox count to 0 
    var count = 0, item; 

    // get all input tags in the form 
    var inputs = document.getElementById("signup").getElementsByTagName("input"); 

    // loop through all input tags in the form 
    for (var i = 0; i < inputs.length; i++) { 
     // get this one into the local variable item 
     item = inputs[i]; 
     // if this input tag has the right classname and is checked, increment the count 
     if ((item.className.indexOf("styled") != -1) && item.checked) { 
      count++; 
     } 
    } 
    // get object for result 
    var obj = document.getElementById("variable"); 
    // check count and set result based on the count 
    if(count < 3) { 
     obj.value = "1"; 
    } else if (count == 3) { 
     obj.value = "74"; 
    } else if (count == 4) { 
     obj.value = "75"; 
    } else if (count == 5) { 
     obj.value = "76"; 
    } 
} 
+0

你在哪裏/何時返回(過濾)數組?只有選中的複選框應該返回,不是嗎? – 2012-02-10 01:50:05

+0

@Heera - 我想你還沒有看到我的答案的最新編輯。看到這些後你是否仍然有疑問請告訴我。 – jfriend00 2012-02-10 01:51:59

+0

我還有疑問嗎? – 2012-02-10 02:01:46