Question

我正在尝试使用此表单，因此当选择第一个单选按钮时，运行某个验证。当选择第二个单选按钮时，运行不同的验证等。当前使用警报检查功能，但无论我选择哪个单选按钮，我都不会收到任何反馈。

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();">

如何根据选中的单选按钮获取不同的警报？

最终，每个单选按钮都会限制用户可以选择的格式下方的复选框数量 - 这就是为什么我无法将此验证完全用于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>&nbsp;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>&nbsp;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恐惧症） - 看看我有什么用？？

Answer 1

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
        }
    }

Answer 2

您需要使用==或===进行比较。 = 指定新值。

除此之外，在处理布尔值时使用==毫无意义。只需使用if(foo)代替if(foo == true)。

Answer 3

您必须使用等于运算符而不是赋值，如

if(document.form1.radio1[0].checked == true) {
    alert("You have selected Option 1");
}

Answer 4

javascript的完整验证示例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio button: full validation example with javascript</title>
        <script>
            function send() {
                var genders = document.getElementsByName("gender");
                if (genders[0].checked == true) {
                    alert("Your gender is male");
                } else if (genders[1].checked == true) {
                    alert("Your gender is female");
                } else {
                    // no checked
                    var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
                return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
            }
        </script>
    </head>
    <body>
        <form action="" method="POST">
            <label>Gender:</label>
            <br />
            <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
            <br />
            <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
            <br />
            <div id="msg"></div>
            <input type="submit" value="send>>" onclick="return send();" />
        </form>
    </body>
</html>

此致

费尔南多

如果选择单选按钮，则在复选框上执行验证

4 个答案: