如何在复选框按钮的复选框验证后显示消息

Question

我正在使用JavaScript检查Validate。我使用的上述输入项需要检查验证。在复选框字段的check bank部分，我使用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>