Javascript：两个“我同意条款复选框”在一页上

Question

我有两个协议，用户必须通过选中两个不同的框（每个协议 1 个）来“同意”，然后才能继续购物车。如果没有选中任何框，则两个警报都会通知他们“同意”，然后再一次继续处理 1 个警报，以及单独处理每个警报。但是，当两者都被选中时，“提交按钮”将不会提交并继续。我怎样才能让以下工作发挥作用？

两个都没有勾选？警报 1

#1 未选中？警报 2

#2 未选中？警报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> </p>
<input type="checkbox" name="agree_2" value="anything">

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

Answer 3

为什么您想提醒用户？我认为这不是一个好的经历。
在我看来，您可以禁用提交按钮，直到选中所有复选框。
这是一个例子：
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/