2

このフォームを操作しようとしているので、最初のラジオ ボタンが選択されたときに、特定の検証を実行します。2 番目のラジオ ボタンが選択されている場合は、別の検証を実行します。現在、アラートを使用して機能を確認していますが、どのラジオ ボタンを選択してもフィードバックがありません。

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 恐怖症) によって書かれたものです - 私が作業しなければならないものが見えますか?!

4

4 に答える 4

8 
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
        }
    }
于 2013-01-14T15:47:13.273 に答える
5

比較のために==またはを使用する必要があります。新しい値を割り当てます。====

==それに加えて、ブール値のみを扱う場合は使用しても意味がありません。if(foo)の代わりに使用してif(foo == true)ください。

于 2013-01-14T15:08:07.383 に答える
1

次のような代入ではなく、等号演算子を使用する必要があります

if(document.form1.radio1[0].checked == true) {
    alert("You have selected Option 1");
}
于 2013-01-14T15:11:51.983 に答える
0

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>

よろしく、

フェルナンド

于 2013-10-23T20:16:26.197 に答える