Javascript：兩個「我同意條款複選框」在一個頁面上

Question

我有兩個協議，用戶必須「同意」通過檢查兩個不同的框（每個協議1），然後繼續購物車。如果沒有選中複選框，兩個警報都會通知他們「同意」，然後每次繼續執行1，並分別單獨執行。但是，「提交按鈕」不會提交，並且在兩者都被選中時繼續。我如何獲得以下功能？

兩者都未選中？ Alert 1

＃1 unchecked？警報2

＃2 unchecked？ Alert 3

請幫忙！

<script language="Javascript"> 
function check_agree (form) { 
if (form.agree.checked) { 
} 
else { alert('You must agree to the application agreement terms before continuing.'); } 
} 
form.submitButton.disabled = true; 
function check_agree_2 (form) { 
if (form.agree_2.checked) { 
} 
else { alert('You must agree to both!'); } 
} 
form.submit() 
</script> 

HTML

<form action='http://webisite.com' method='post' onSubmit="return false;"> 
<p> 
<span style="text-align: center"> 
<input type ="checkbox" name="agree" value="anything"> 

<b>I Agree To And Understand The Charges That Will Be Processed To My Credit Card</b></span></p> 
<p>&nbsp;</p> 
<input type ="checkbox" name="agree_2" value="anything"> 

<b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b> 
<p>&nbsp;</p> 
<span style="text-align: center"> 
<input type="submit" name="submitButton" onClick="check_agree(this.form);check_agree_2(this.form)" value="Continue To Shopping Cart"> 

</form> 

Answer 1

更換check_agree，刪除check_agree_2，並更改提交按鈕。

function check_agree(form) { 
if (form.agree.checked && form.agree_2.checked) { 
    return true; 
} else if(!form.agree.checked) { 
    alert('You must agree to the application agreement terms before continuing.'); 
} else if(!form.agree_2.checked) { 
    alert('You must allow us to charge your credit card.'); 
} 
return false; 
} 

HTML

<input type="submit" name="submitButton" onClick="check_agree(this.form)" value="Continue To Shopping Cart"> 

Answer 2

也許試試這個：

<script type="text/javascript"> 
    function check_agree (form) { 
     if (form.agree.checked && form.agree_2.checked) { 
      return true; 
     } 
     if (form.agree_2.checked) { 
      alert('You must agree to the application agreement terms before continuing.'); 
     } 
     else if (form.agree.checked) { 
      alert("message #2!"); 
     } 
     else { 
      alert('You must agree to both!'); 
     } 
     return false; 
    } 
</script> 

...這一點：

<form action="http://webisite.com" method='post' onsubmit="return check_agree(this);"> 
<p> 
<span style="text-align: center"> 
<input type="checkbox" name="agree" value="anything"> 

<b>I Agree To And Understand The Charges That Will Be Processed To My Credit Card</b></span></p> 
<p>&nbsp;</p> 
<input type="checkbox" name="agree_2" value="anything"> 

<b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b> 
<p>&nbsp;</p> 
<span style="text-align: center;"> 
<input type="submit" name="submitButton" value="Continue To Shopping Cart"> 
</form> 

Answer 3

你爲什麼喜歡alert用戶？我不認爲這是一個很好的體驗。
在我看來，你可以禁用提交按鈕，直到所有的複選框被選中。
下面是一個例子：
HTML：

<input type="checkbox" id="cb1">I Agree To And Understand The Charges That Will Be Processed To My Credit Card<br> 
<input type="checkbox" id="cb2">I Have Read And Agree To The Member Agreement/Terms And Conditions 
<input type="submit" id="button" value="Submit"> 

的JavaScript：

var cb1 = document.getElementById("cb1"), 
    cb2 = document.getElementById("cb2"), 
    button = document.getElementById("button"); 
button.disabled = true;  
cb1.onclick = cb2.onclick = function(){ 
    if(cb1.checked && cb2.checked){ 
     button.disabled = false; 
    } 
    else{ 
     button.disabled = true; 
    } 
}; 

你可以看到現場演示在這裏：http://jsfiddle.net/XZyjw/