我在使用javascript处理表单中的复选框按钮时遇到问题。我创建了一个表格来收集客户信息。在表格中，除了名字、姓氏、电子邮件等基本信息外。。。在表单的末尾，我使用了一个导航选项卡面板来创建2个选项。
我配置的选项1中的复选框按钮是检查的强制性按钮
因此，我的表格可能出现以下两种情况：
案例1：当客户输入基本信息并选择选项1时，选中复选框并按下提交按钮(在这种情况下，没有问题(
情况2:客户输入基本信息并选择选项2后，无法按下提交按钮。(因为选项1中的复选框尚未选中(
我的问题是：我必须选择[1][2]。在选项1中，必须选中复选框，然后我才能提交表格。但如果选择选项2，我不想选中复选框，我想知道如何提交表格。
由于我的项目代码太长，我使用W3C代码作为解决问题的示例。希望你们能帮我
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<form>
<div class="w3-container">
<h2>Example</h2>
</div>
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
<div id="London" class="w3-container city">
<h2>London</h2>
<p><input type="checkbox" requied >London is the capital city of England.</p>
</div>
<div id="Paris" class="w3-container city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="w3-container city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
<input type="submit" value="submit">
<script>
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
</script>
</form>
</body>
</html>这个问题用javascript很容易解决。你为什么评价这篇文章-3
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0px;
}
body{
width: 100%;
height: auto;
background-color: white;
}
table,td,tr{
padding:5px;
}
table{
max-width: 700px;
margin:auto;
display: table;
background-color: #eee;
}
td{
display: table-cell;
font-size: auto;
}
input[type=checkbox]
{
/* Double-sized Checkboxes */
-webkit-transform: scale(1.3, 1.3)
}
#seireki{margin-left: 34px;}
#title{
font-weight: 900;
}
/* button */
.disable{pointer-events:fill}
label{position:relative}
label:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
}
.button-group-item{
border-radius: 1px solid gray;
}
/* button */
.main input[type=radio] {
display: none;
}
p span{border-bottom: 1px solid gray;}
#tab-1:checked ~ .tab label:nth-child(1),
#tab-2:checked ~ .tab label:nth-child(2),
{
background-color: rgba(0, 0, 0, 0.2);
box-shadow: none;
}
.content > div {
display: none;
width: 476px;
margin-top: 5px;
height: 237px;
}
#tab-1:checked ~ .content div:nth-child(1),
#tab-2:checked ~ .content div:nth-child(2) {
display: block;
}
.main {
margin-top: 20px;
max-width: 800px;
height: auto;
}
.tab {
overflow: hidden;
label {
font-size: 18px;
cursor: pointer;
float: left;
color: #fff;
width: 25%;
text-align: center;
padding: 15px 0;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
user-select: none;
-webkit-user-select: none;
}
}
.content {
min-height: 250px;
> div {
padding: 30px;
line-height: 1.5;
font-size: 17px;
}
}
/* small_table */
.content-dis{
border:1px solid gray;
height: auto;
padding-left: 5px;
}
input[type="submit"] {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
input[type="submit"]:hover, input[type="submit"]:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
</style>
</head>
<body>
<form action="https://www.google.com/" method="post">
<table>
<tr>
<td id="title" rowspan="1">決済条件<br><span>(ご希望の口欄<br>に選択して<br>下さい)<span></td>
<td>
<div class="main">
<input type="radio" id="tab-1" name="show" checked/>
<input type="radio" id="tab-2" name="show" />
<div class="tab">
<button type="button" id="button-left" name="button-group" value="item">
<label for="tab-1" id="tab-1" >
<input type="radio" name="button-group" value="item" checked>
<span class="button-group-item">銀行振込</span>
</label>
</button>
<button type="button" id="button-right">
<label for="tab-2" id="tab-2" >
<input type="radio" name="button-group" value="other-item">
<span class="button-group-item">口座振替</span>
</label>
</button>
</div>
<div class="content">
<div class="content-dis">
<p>
締切日
<select class="" name="deadline">
<option value="20日">20日</option>
<option value="末日">末日</option>
</select>
</p>
<p>
希望支払日
<select class="Desired_payment_date" name="Desired_payment_date">
<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>
<option value="末">末</option>
</select>
</p>
<p>
<select class="bank" name="Bank_transfer_destination">
<option value="福井銀行">福井銀行</option>
<option value="北陸銀行">北陸銀行</option>
<option value="敦賀信用金庫">敦賀信用金庫</option>
<option value="商工中金">商工中金</option>
<option value="滋賀銀行">滋賀銀行</option>
<option value="三菱UFG銀行">三菱UFJ銀行</option>
</select>
</p>
<p><input type="checkbox" name="test" value="" id="myCheck" >振込手数料の負担に同意します。</p>
</div>
<div class="content-dis">
<p>
締切日
<select class="" name="deadline_Account_transfer">
<option value="">20日</option>
<option value="">末日</option>
</select>
</p>
<p>引落日 ：翌月２７日(固定)</p>
<p>※振替日が休日の場合は、翌営業日となります。</p>
<p>※営業日とは、金融機関窓口営業日です。</p>
<p>※全国の金融機関がご利用できます。</p>
<p><span>※講座振替の場合は、手数料のご負担は</span></p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"> <input type="submit" onclick="myFunction()"></input></td>
<!-- document.getElementById("myCheck").required = false; -->
</tr>
</table>
<script>
function myFunction() {
if(document.getElementById("tab-1").checked){
document.getElementById("myCheck").required = true;
}
else if(document.getElementById("tab-2").checked){
document.getElementById("myCheck").required = false;
}
}
</script>
</form>
</body>
</html>