javascript - 如何在检查复选框按钮验证后显示消息？

Question

我正在使用 JavaScript 来检查验证。我使用的上述输入项需要检查验证。在复选框字段的支票银行部分，我使用 JavaScript 来检查表单的有效性。验证完成后如何显示消息？我尝试了几种解决方案，但似乎都不起作用。这是我的代码

function checkbox() {
   if (document.getElementById("tab-1").checked) {
      document.getElementById("myCheck").required = true;
      document.getElementById("deadline").required = true;
      document.getElementById("Desired_payment_date").required = true;
      document.getElementById("Bank_transfer_destination").required = true;
       return false;
    } 
    else if (document.getElementById("tab-2").checked) {
      document.getElementById("myCheck").required = false;
      document.getElementById("AccountTransfer").required = true;
      return false;
    }
   return true;
 }
   
 function done(){
   if(checkbox()==true){
      alert("done")
   }
 }

table, tr, th,td {
  border: 2px solid #dfd7ca;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-borderless">
   <thead>
      <tr >
         <th scope="col" style="font-size:24px"><input type="checkbox" id="tab-1"  name="one" value="✔" style="height:20px;width:20px;margin-right:10px;" ><span id="銀行振込">Bank transfer</span></th>
         <th scope="col" style="font-size:24px"><input type="checkbox" id="tab-2" 　name="two" value="✔"style="height:20px;width:20px;margin-right:10px;"  ><span id="口座振替">Account transfer</span></th>
      </tr>
      <script>
         $(document).ready(function(){
             $("#tab-1").click(function(){
                 $("#tab-2").prop("checked", false);
                 $("#銀行振込").css("color", "#44aa00");
                 $("#銀行振込").css("text-decoration", "underline  #44aa00");
                 $("#口座振替").css("color", "black");
                 $("#口座振替").css("text-decoration", "none ");
            });
         
             $("#tab-2").click(function(){
                 $("#tab-1").prop("checked", false);
                 $("#口座振替").css("color", "#44aa00");
                 $("#銀行振込").css("color", "black");
                 $("#口座振替").css("text-decoration", "underline  #44aa00");
                 $("#銀行振込").css("text-decoration", "none ");
             });
         });
      </script>
      </script>
   </thead>
   <tbody>
      <tr>
         <th scope="row">
            <p>
               <label for=""> deadline </label> 
               <select class="" name="deadline" id="deadline" class="form-select"  style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
                  <option value="" selected></option>
                  <option value="20">20</option>
                  <option value="30">30</option>
               </select>
            </p>
            <p>
               <label for="">Desired payment date </label>
               <select class="Desired_payment_date" id="Desired_payment_date" name="Desired_payment_date" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
                  <option value="" selected></option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
               </select>
            </p>
            <p>
               <label for="">Bank </label>
               <select class="bank" name="Bank_transfer_destination" id="Bank_transfer_destination"  style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;">
                  <option value="" selected></option>
                  <option value="福井銀行">A</option>
                  <option value="北陸銀行">B</option>
                  <option value="敦賀信用金庫">C</option>
                  <option value="商工中金">D</option>
                  <option value="滋賀銀行">E</option>
                  <option value="三菱UFG銀行">F</option>
               </select>
            </p>
            <label style="font-weight:bold;font-size: 20px;"><input type="checkbox" style="height:20px;width:20px;margin-right:10px;" 　 class="form-check-input" 　id="flexCheckChecked"  id="myCheck" name="Checkbox_value"  value="✔振込手数料の負担に同意します。"> 
            I agree to bear the transfer fee.。</label>
         </th>
         <td>
            <p >
               <label for="">Deadline</label>  
               <select class="" name="AccountTransfer" id="AccountTransfer" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
                  <option value="" selected></option>
                  <option value="20日">20日</option>
                  <option value="末日">末日</option>
               </select>
            </p>
         </td>
      </tr>
      </tr>
   </tbody>
</table>
<button onclick="checkbox()"  id="btn" type="submit" name="input" class="btn btn-primary btn-block">Send</button>

Answer 1

可以查看DOM属性select.options.selectedIndex检查是否 <select>元素被选中。

let button = document.getElementById('btn');
let deadline = document.getElementById("deadline");
let desiredPD = document.getElementById("Desired_payment_date");
let bankTD = document.getElementById("Bank_transfer_destination");
let myCkeck = document.getElementById("myCheck");
let accountT = document.getElementById("AccountTransfer");

/* In this solution, when the button is clicked, <form> control is done. */
button.addEventListener('click', function(event) {
  if(isValid()){
    alert("done");
  }
  else{
    alert("failed");
  }
});

/* This method returns true if validation is successful. */
function isValid() 
{
  if (document.getElementById("tab-1").checked) {
    let result = (deadline.selectedIndex != 0) ? true : false;
    result &= (deadline.selectedIndex != 0) ? true : false;
    result &= (desiredPD.selectedIndex != 0) ? true : false;
    result &= (bankTD.selectedIndex != 0) ? true : false;
    result &= (myCkeck.selectedIndex != 0) ? true : false;
    return result;
  } 
  else if (document.getElementById("tab-2").checked) {
    return (accountT.selectedIndex != 0) ? true : false;
  }
  else
    return false;
}

table, tr, th,td{
  border: 2px solid #dfd7ca;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-borderless">
    <thead>
        <tr >
            <th scope="col" style="font-size:24px"><input type="checkbox" id="tab-1"  name="one" value="✔" style="height:20px;width:20px;margin-right:10px;" ><span id="銀行振込">Bank transfer</span></th>
            <th scope="col" style="font-size:24px"><input type="checkbox" id="tab-2" 　name="two" value="✔"style="height:20px;width:20px;margin-right:10px;"  ><span id="口座振替">Account transfer</span></th>
        </tr>
        <script>
            $(document).ready(function(){
                $("#tab-1").click(function(){
                    $("#tab-2").prop("checked", false);
                    $("#銀行振込").css("color", "#44aa00");
                    $("#銀行振込").css("text-decoration", "underline  #44aa00");
                    $("#口座振替").css("color", "black");
                    $("#口座振替").css("text-decoration", "none ");
               });
            
                $("#tab-2").click(function(){
                    $("#tab-1").prop("checked", false);
                    $("#口座振替").css("color", "#44aa00");
                    $("#銀行振込").css("color", "black");
                    $("#口座振替").css("text-decoration", "underline  #44aa00");
                    $("#銀行振込").css("text-decoration", "none ");
                });
            });
        </script>
        </script>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <p>
                    <label for=""> deadline </label> 
                    <select class="" name="deadline" id="deadline" class="form-select"  style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
                        <option value="" selected></option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                    </select>
                </p>
                <p>
                    <label for="">Desired payment date </label>
                    <select class="Desired_payment_date" id="Desired_payment_date" name="Desired_payment_date" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
                        <option value="" selected></option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                    </select>
                </p>
                <p>
                    <label for="">Bank </label>
                    <select class="bank" name="Bank_transfer_destination" id="Bank_transfer_destination"  style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;">
                        <option value="" selected></option>
                        <option value="福井銀行">A</option>
                        <option value="北陸銀行">B</option>
                        <option value="敦賀信用金庫">C</option>
                        <option value="商工中金">D</option>
                        <option value="滋賀銀行">E</option>
                        <option value="三菱UFG銀行">F</option>
                    </select>
                </p>
                <label style="font-weight:bold;font-size: 20px;"><input type="checkbox" style="height:20px;width:20px;margin-right:10px;" 　 class="form-check-input" id="myCheck" name="Checkbox_value"  value="✔振込手数料の負担に同意します。"> 
                I agree to bear the transfer fee.。</label>
            </th>
            <td>
                <p >
                    <label for="">Deadline</label>  
                    <select class="" name="AccountTransfer" id="AccountTransfer" style="display: block;width: 100%;height: 46px;padding: 12px 16px;font-size: 14px;line-height: 1.42857143;color: #3e3f3a;background-color: #ffffff;background-image: none;border: 1px solid #dfd7ca;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;" >
                        <option value="" selected></option>
                        <option value="20日">20日</option>
                        <option value="末日">末日</option>
                    </select>
                </p>
            </td>
        </tr>
        </tr>
    </tbody>
</table>
<button id="btn" type="submit" name="input" class="btn btn-primary btn-block">Send</button>