複選框JS反覆不當

Question

我有一個像這樣在我的登記表複選框：

<form name="reg" id="reg" method="post"> 
    <input type="checkbox" onclick="return validate('tos')" name="tos"/> 
</form> 

，我使用JS以檢查其選中，如果是的話，顯示的形式一個綠色的勾。但是，它實際上並未勾選複選框，但它正在加載綠色勾號。

此外，第二次單擊它不會刪除它應該的綠色標記，因爲用戶有效地取消選中複選框。

所以我的JS是這樣的：

function validate (type){ 
    output = []; 
    var x = document.getElementById("reg"); 

    if (type == 'tos'){ 
     div = 'result_tos'; 
     input = x.elements[4].checked; 

     if (input){ 
      output.push('<img src="correct.png"/>');  
     } else { 
      output.push('You must agree to our terms of service in order to join !'); 
     } 

     document.getElementById(div).innerHTML = (output.join('')); //display result 
    } 
} 

Answer 1

以下的jsfiddle是你的代碼稍加修改的版本，這似乎是工作的罰款。我不認爲你的錯誤在這裏。 （我不熟悉的elements;是IE具體我改變了對其他瀏覽器？）

http://jsfiddle.net/QnDAg/1/

Answer 2

這可能是我怎麼會建議你這樣做，這比給定的例子更復雜，但我掙扎與預期的流一點點，的OP使用流量：

莫克HTML

<form name="reg" id="reg" method="post"> 
    <input type="checkbox" id="agree" name="agree"/> Agreement<br/> 
    <input type="checkbox" id="ok" name="ok"/> Ok<br/> 
    <input type="checkbox" id="tos" name="tos"/> TOS<br/> 
    <button name="submit" type="submit">Submit Validation</button> 
</form> 
<h1>Display Output</h1> 
<div id="display"></div>​ 

迭代驗證

function validate(){ 
    var display = document.getElementById('display'), 
     output = [], 
     checks = ['agree','ok','tos'], 
     check, 
     msg; 

    while (check = document.reg[checks.pop()]) { 
     if (!check.checked) { 
      switch (check.name) { 
       case 'agree': 
        msg = 'You must AGREE!'; 
       break; 
       case 'ok': 
        msg = 'You must OK!'; 
       break; 
       case 'tos': 
        msg = 'You must TOS!'; 
       break; 
      } 

      output.push(msg); 
     } 
    } 

    if (output.length == 0) { 
     output = [ 
      'You have successfully validated!', 
      '<img src="http://goo.gl/UohAz"/>' 
     ]; 
    } 

    display.innerHTML = output.join('<br>'); 

    return false; 
} 

而當您將事件處理程序不要忘了window.onload。以下不一定是首選的首選方法，但它比內聯處理程序（如onclick="validate()"）更清潔。

window.onload = function(){ 
    document.reg.onsubmit = validate; 
}; 

http://jsfiddle.net/bj5rj/2

Answer 3

我會爲下方接近這一點。傳遞來自偵聽器的元素的引用。

<form name="reg" id="reg" method="post"> 
    <input type="checkbox" onclick="return validate(this)" name="tos"> 
</form> 

<script type="text/javascript"> 

function validate(el) { 
    // you don't really need a reference to the form, 
    // but here's how to get it from the element 
    var form = el.form; 

    if (el.name == 'tos') { 

    if (el.checked) { 
     // show pass graphic (green tick?) 

    } else { 
     // hide checkbox and show text 
    } 
    } 
} 
</script> 

顯示刻度和文字之間的交換，應通過設置一個類值來完成，這樣你可以把它改成任何你想要的標記和腳本只是切換兩個。