如果选择了单选按钮，请在复选框上执行验证 [英] If Radio Button is selected, perform validation on Checkboxes
本文介绍了如果选择了单选按钮，请在复选框上执行验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图来解决这个形式，从而选择第一个单选按钮时，运行了一定的验证.选择第二个单选按钮后，请运行其他验证，等等.当前正在使用警报"检查功能，但是无论我选择哪个单选按钮，都不会收到任何反馈.
I'm trying to work this form so when the first radio button is selected, run a certain validation. When the second radio button is selected, run a different validation, etc. Currently using Alerts to check the functionality, but whichever radio button I choose I do not receive any feedback.
javascript函数
<script type="text/javascript">
function validateDays() {
if (document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
else if (document.form1.radio1[1].checked == true) {
alert("You have selected Option 2");
}
else if (document.form1.radio1[2].checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
html输入代码
<input name="radio1" type="radio" value="option1" id="option1" onClick="validateDays();">
<input name="radio1" type="radio" value="option2" id="option2" onClick="validateDays();">
<input name="radio1" type="radio" value="option3" id="option3" onClick="validateDays();">
如何根据选中的单选按钮获得不同的警报?
How do I get a different alert depending on which radio button is checked?
最终，每个单选按钮都会在用户可以选择的表单的下方进一步限制复选框的数量-这就是为什么我不能仅在onClick()上进行此验证的原因
Eventually, each radio button will limit the number of checkboxes further down the form the user is able to select - which is why I cannot work this validation purely in to the onClick()
更多完整代码-根据要求
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#3daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', true);
});
jQuery('#2daypass , #1daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', false);
});
});
</script>
<script type="text/javascript">
function validateDays() {
if (document.getElementById('3daypass').checked) {
alert("You have selected Option 1");
}
else if (document.getElementById('2daypass').checked) {
alert("You have selected Option 2");
}
else if (document.getElementById('1daypass').checked) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
<tr>
<td colspan="5" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65%" valign="top"><table width="100%" height="100%" border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td height="18" colspan="2" align="left" bgcolor="#000000"><span class="boxheader"><strong> Conference Pass</strong></span> <span class="bodycopyWhite"> - (Please select a day pass below)</span></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
<tr bgcolor="#EBEBEB">
<td align="center" valign="top" bgcolor="#EBEBEB"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="7%"><input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td width="93%" class="bodyNormal"><strong>Three-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>Two-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>One-day</strong> open delegate pass</td>
</tr>
</table></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
</table>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" colspan="2" bgcolor="#000000" class="boxheader"><strong> Please select the days you will be attending</strong></td>
</tr>
<tr>
<td width="9%" bgcolor="#EBEBEB"><input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"></td>
<td width="91%" bgcolor="#EBEBEB" class="bodycopy">Tuesday 5 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Wednesday 6 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Thursday 7 February 2013 </td>
</tr>
为凌乱的代码表示歉意-这是由其他人(在2005年出现明显的CSS恐惧症)写的-看看我该怎么办?！
推荐答案
function validateDays() {
if (document.getElementById("option1").checked == true) {
alert("You have selected Option 1");
}
else if (document.getElementById("option2").checked == true) {
alert("You have selected Option 2");
}
else if (document.getElementById("option3").checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
这篇关于如果选择了单选按钮，请在复选框上执行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
