制作一个复选框并检查是否选中

Question

我有一个 "terms of use" 页面，然后我有付款页面等等。在此页面上，我希望用户必须选中一个复选框，其中会显示 "if he accepts the terms of use"，但我还想要一个 javascript，用于支付服务 Stripe，以检查该复选框是否已选中，并且如果没有，它会提醒用户检查它，如果它像往常一样继续。

我在脚本中评论了不同的功能。我希望它能正常工作，所以如果我单击复选框然后单击提交按钮，它将照常工作，但如果我不选中该复选框，它将出现一个警告框。我想使用 "if" 函数来执行此操作。复选框必须采用 ID 为 "payment-form" 的形式，其中其余输入为

javascript是标签中的全部函数。如果未选中复选框，则必须禁用整个功能。

到目前为止我的代码：

<!DOCTYPE html>
<html>

<head>

    <script src="https://checkout.stripe.com/checkout.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript"> /* this is the javascript function that only has to "launch" if the checkbox is checked and if not it has to make an alert box to the user and not do any of the other functin in the javascript. */
    $(document).ready(function() {  

    var handler = StripeCheckout.configure({
        key: 'Removed for safety',
        image: 'image2.png',
        token: function(token) {
            var $form = $('#payment-form');

            $form.append($('<input type="hidden" name="stripeToken" />').val(token.id));
            $form.get(0).submit();
        }
    });

    $('#customButton').on('click', function(e) {

        var amount = Math.round($("#amount").val()*100);

        handler.open({
        name: 'Payment',
        description: 'describtion',
        amount: amount
        });
        e.preventDefault();
    });

    $(window).on('popstate', function() {
        handler.close();
    });

});
    </script>

</head>

<body>

        <div id="header">
        </div>

        <div id="container">

        <div id="content">

            <div class="firstproductbidwrap" style="height:500px width:800px">


                    <form id="payment-form" action="chargeCard.php" method="POST" name="payment-form"> <!-- this is the form I would like to add the checkbox to -->
                    <input onkeypress="return isNumberKey(event)" type="text" name="amount" id="amount" value="" readonly/>
                    <input type="text" name="emailForPayment" id="emailForPayment" placeholder="Enter Email"/>
                    <input type="text" name="displayNameForPayment" id="displayNameForPayment" placeholder="Enter Display Name" maxlength="12"/>
                    <input type="image"  src="button3.png" id="customButton" value="submit" alt="button"/>
                    </form>

                    <script type="text/javascript">
                    function toDec(code) {
                    return code - 48;
                    }
                    function isNumberKey(evt)
                    {
                    var charCode = (evt.which) ? evt.which : event.keyCode
                    if (charCode > 31 && (charCode < 48 || charCode > 57 || toDec(charCode) != currentVar + 1)) 
                    return false;

                    return true;
                    }
                    </script>

                    <script type="text/javascript">
                    var request = new XMLHttpRequest();
                    request.open('GET', 'textFileVariables.txt', false);
                    request.send();

                    var currentVar= parseInt(request.responseText)
                    var nextVar = currentVar + 1;
                    document.getElementById("currentVar").innerHTML = currentVar;
                    document.getElementById("nextVarDisplay").innerHTML = nextVar ;
                    document.getElementById("amount").value = nextVar ;

                    </script>


                <div class="acceptrules">
                    When participating <!-- this is the text for accept terms with the link -->
                    <br>
                    you agree to the rules <a href="">Terms of Use</a>
                </div>

            </div>


        </div>


        </div>

</body>

</html>

Answer 1

你能做到的是：

 <!--Replace this thing -->
 <input type="image"  src="button3.png" id="customButton" value="submit" alt="button"/>

 <!-- By This -->
 <input id="myButton" type="submit" disabled="disabled" />

然后在CSS

  <style>
     #myButton{
        background: url(path/to/your/image.png);
        width: 100px; /*Your image size*/
        height: 50px; /*Your image height*/
     }           
  </style>

然后，您在提交之前添加此输入

      <label><input type="checkbox" id="terms" /> I accept terms and condition</label>

然后在你的 JS 中

       $('#terms').on('change', function(){
          if ($(this).is(':checked')){
             $('#myButton').removeProp('disabled');
          }
          else{
             $('#myButton').attr('disabled', 'disabled');
          }
       });

Answer 2

将 <input type="checkbox" id="agree" /> 放在表单中的某处，然后试试这个：

$('#customButton').on('click', function(e) {
    if (!document.getElementById("agree").checked)
        alert("You must agree to the TOS.");
    else {
        var amount = Math.round($("#amount").val()*100);

        handler.open({
        name: 'Payment',
        description: 'describtion',
        amount: amount
        });
    }
    e.preventDefault();
});

https://jsfiddle.net/cj6f41aL/

制作一个复选框并检查是否选中

Make a checkbox and check if checked

html

javascript

forms

checkbox

if-statement