我正在尝试在提交要进行验证的表单之前检查是否选中了两个单选按钮之一。
<body onload="init();">
<form name="myForm" onsubmit="return validateForm();">
<label for="cName">Client Name*</label><br>
<div style="width:74.8%; display:inline-block;">
<input type="text" id="cName" name="cName" placeholder="Client Name..." required>
</div><div style="width:25.2%; display:inline-block;">
<select class="select1" id="cRecord" name="cRecord" required>
<option value="" disabled selected>Advised Recording...
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
Yes <input required type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck">
No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br>
<div id="ifyes" style="display:none">
<div class="buttons">
<input type="button" id="formOut" onclick="this.form.submit();" value="Submit">
</div>
<script>
$('#formOut').click(function validateForm() {
var Name = document.forms["myForm"]["cName"].value;
var Record = document.forms["myForm"]["cRecord"].value;
var yesSME = $("#yesCheck").prop("checked");
var noSME = $("#noCheck").prop("checked");
if (Name == "") {
alert("//Alert Here");
return false;
}
if (Record == "") {
alert("//Alert Here");
return false;
}
if (yesSME == false || noSME == false) {
alert("//Alert Here");
return false;
} else if (cName != "" && cRecord != "" && ((yesSME == true) || (noSME == true))) {
// do things here
}
});
<script>
</form>
目前，我发现即使选择了单选选项，用户在提交表单时也会收到警报。
编辑：
期望的行为-如果用户选择了cName，cRecord和一个收音机之一，则在用户单击“提交”按钮后，模态将打开。
当前行为-如果用户选择了cName，cRecord和一个单选框之一，则用户单击“提交”按钮时，单选框会发出警报。
如果在单击“提交”按钮时，cName或cRecord字段中的一个或两个都没有用户输入，则将为cName或cRecord字段给出警报。
如果我取消选中单选按钮的检查功能，则该功能（打开模式）将没有任何问题，
唯一的问题似乎在于检查单选按钮是否已选中/未选中
任何帮助将不胜感激。
答案 0 :(得分：1)
**另一个答案（我想保留第一个作为参考）
您可以实现自己想要的：
HTML：
<!DOCTYPE html>
<html>
<body>
<form id="form1" action="javascript:void(0);">
<label for="cName">Client Name*</label><br>
<input type="text" id="cName" name="cName" placeholder="Client Name..."> <br><br>
<select class="select1" id="cRecord" name="cRecord">
<option value="" disabled selected>Advised Recording...
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
Yes <input type="radio" value="Yes" name="TLSME" id="yesCheck">
No <input type="radio" value="No" name="TLSME" id="noCheck"><br>
<input type="submit" id="formSubmit" value="Submit">
</form>
</body>
</html>
JS（JQuery）：
$("#form1").submit(function(){
if (!$("input[name='TLSME']").is(':checked') || $("#cName").val() === '' || $("#cRecord").val() === '') {
alert('Please complete required fields!');
} else {
// your code here
}
});
答案 1 :(得分：0)
if(!document.getElementById('yesCheck').checked || !document.getElementById('noCheck').checked) {
alert('Not checked');
}
应该做到这一点
答案 2 :(得分：0)
您可以使用JQuery轻松做到这一点：
HTML：
<html>
<body>
<form id="form1" action="javascript:void(0);">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other <br>
<input type="submit">
</form>
</body>
</html>
Javascript：
$("#form1").on("submit", function(){
//Code: Action (like ajax...)
if ($('input[name=gender]:checked').length <= 0) {
alert("No radio checked")
}
})
**注意：
action="javascript:void(0);"
已添加以防止提交表单（不执行任何操作），您可以在需要采取措施时将其删除。
答案 3 :(得分：0)
required 您似乎正在尝试完成浏览器的工作。您不需要显示警报，通常是糟糕的UX ，因为您可以通过required属性使用内置表单验证，如下所示：
<form onsubmit="...">
<input type="radio" name="group" value="1" required />
<input type="radio" name="group" value="2" />
...
<button type="submit">Submit</button>
<form />
注意：：您只需要一个required属性，它将应用于所述组中的所有输入。