[英]Issue while checking radio buttons
I am trying to show a red circle with the "!" 我试图用“!”显示一个红色圆圈。 when the radio buttons are unchecked and to show a green circle when both are checked.
取消选中单选按钮时,当两个都选中时显示一个绿色圆圈。 After that I use a function to make the button submit or not according to the red/green circle.
之后,我使用一个功能根据红色/绿色圆圈使按钮提交或不提交。
I've tried many ways to tangle with the code but it doesn't want to show the green circle when it's checked any idea why ? 我尝试了许多方法来纠缠代码,但是当检查任何想法时,它都不想显示绿色圆圈?
PS: PS:
span3 (red circle ) span3(红色圆圈)
span2 (green circle) span2(绿色圆圈)
Basically I want to make my form validation by js not by php ... 基本上我想通过js而不是php进行表单验证...
HTML: HTML:
<label id="labelage">Age:</label>
<br>
<input type="radio" id="under_13" value="under_13" name="age">
<label for="under_13" class="light">Under 13</label>
<input type="radio" id="over_13" value="over_13" name="age">
<label for="over_13" class="light">13 or Older</label>
<div class="break"></div>
<div id="borderlabel">
<label id="labelage1">Gender:</label>
<input type="radio" id="male" value="male" name="gender">
<label for="male" class="light1">Male</label>
<input type="radio" id="female" value="female" name="gender">
<label for="female" class="light1">Female</label>
</div>
....
<button type="submit" id="signupb" name="register">Sign up
<div class="span3">!</div>
<div class="span2">✔</div>
</button>
JavaScript 的JavaScript
$(".span1").hide();
$(".span2").hide();
$(".span3").hide();
function submit() {
if (!$('#male').is(':checked') || !$('#female').is(':checked')) {
$(".span3").show();
} else {
if (!$('#under_13').is(':checked') || !$('#over_13').is(':checked')) {
$(".span3").show();
} else {
$(".span2").show();
}
}
}
$("#signupb").on("mouseover", submit);
submit
submit
Try this: 尝试这个:
function checkRad() { var ok = ($('#male').is(':checked') || $('#female').is(':checked')) && ($('#under_13').is(':checked') || $('#over_13').is(':checked')) $(".span3").toggle(!ok); $(".span2").toggle(ok); return ok; } $(function() { $(".span1").hide(); $(".span2").hide(); $(".span3").hide(); $("#signupb").on("mouseover", checkRad) .on("click", function(e) { if (!checkRad()) e.preventDefault(); }) $("input[type=radio]").on("click", function() { checkRad(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label id="labelage">Age:</label> <br> <input type="radio" id="under_13" value="under_13" name="age"> <label for="under_13" class="light">Under 13</label> <input type="radio" id="over_13" value="over_13" name="age"> <label for="over_13" class="light">13 or Older</label> <div class="break"></div> <div id="borderlabel"> <label id="labelage1">Gender:</label> <input type="radio" id="male" value="male" name="gender"> <label for="male" class="light1">Male</label> <input type="radio" id="female" value="female" name="gender"> <label for="female" class="light1">Female</label> </div> .... <button type="submit" id="signupb" name="register">Sign up <div class="span3">!</div> <div class="span2">✔</div> </button>
name
attribute. name
属性访问元素。 Change your submit()
function to: 将您的
submit()
函数更改为:
function validateForm() {
$(".span2").hide();
$(".span3").hide();
var isError = false;
if (!$('#male').is(':checked') && !$('#female').is(':checked')) {
isError = true
} else if (!$('#under_13').is(':checked') && !$('#over_13').is(':checked')) {
isError = true;
}
if(isError){
$(".span3").show();
} else {
$(".span2").show();
}
}
$("#signupb").on("mouseover", validateForm);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.