0

私はhtml、css、phpが初めてなので、小さなプロジェクトを完成させるのに非常に多くの問題に直面しています。気にしないでください。スクリーンショットを含めました。問題は、ラジオボタン「はい」をクリックするたびに、対応するテーブルの入力テキストフィールドのみが機能することです。「いいえ」ボタンを選択すると、テキスト フィールドは非表示になります。つまり、入力は行われず、テーブルを埋めずに続行できるはずです。前もって感謝します。

ここに画像の説明を入力

.html

<body>
<form action="reg2.php" method="post">
<div id="formWrap">
  <div class="row">
        <div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>  
  </div> <!-- end of 0th row -->

<div id="form">
    <div class="row">
        <div class="labelusn1">USN</div>
        <div class="inputusn">
            <input type="text" id="usn" required="required" class="usndetail" name="usn"/>
        </div>
    </div> <!-- end of 1st row -->
    <h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
    <div class="row>
     <div class="inputradio1" style="margin-left:50px">
        <input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
        <input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
  </div> <!-- end of  row -->   
    <table width="719" border="1" align="center" style="margin-top:10px">
  <tr bgcolor="#A7A7A7">
    <td width="87"><div align="center" class="style1">    Course Code </div></td>
    <td width="50"><div align="center" class="style2">    Credits</div></td>
   <td width="87"><div align="center" class="style3">    Status(D/W/F)</div></td>
    <td width="467"><div align="center" class="style4">    Remarks</div></td>
 </tr>
  <tr>
<td><input type="text" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>

コードの残りの部分は残しました...必要に応じて投稿します

4

4 に答える 4

1

そのようなものhttp://jsfiddle.net/Z8jU3/1/ ?

$('.detailradio1').change(function(){
    if($(this).attr('id')=='sex' && $(this).is(':checked')){
        $('table').hide();
    }else{
        $('table').show();
    }
})
于 2013-07-27T07:26:38.043 に答える
1

問題は解決しました。以下を確認してください。

これらのスクリプトを追加するだけです:

<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Applying Custom JS -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
    // Disabling Text Fields by default
    $("table input[type='text']").each(function () {
        $(this).attr("disabled", "disabled");
    });

    $(".inputradio1 input[name=sex]").change(function () {
        var val = $(this).val();
        if (val == "No") {
            $("table input[type='text']").each(function () {
                $(this).attr("disabled", "disabled");
            });
        } else if (val == "Yes") {
            $("table input[type='text']").each(function () {
                $(this).removeAttr("disabled");
            });
        }
    });
});
</script>

または、ここでフィドルをチェックアウトしてくださいhttp://jsfiddle.net/kDG5t/2/

于 2013-07-27T09:24:36.230 に答える
0

セクション全体を隠したい場合は、CSS を使用できます。

たとえば、div のようなコンテナー要素と同じ DOM レベルにラジオがある場合:

div.formContainer {
  display: none;
}

input[type=radio]#yes:checked ~ div.formContainer {
  display: block;
}

HTML には、基本的に次のような内容があります。 

<input type="radio" name="yesno" id="yes" /><label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" /><label for="no">No</label>
<div class="formContainer">
  <input type="text" id="input1" name="input1" value="Hello World!" />
</div>

これは、「はい」が現在の選択である場合、テキスト入力フィールドが表示され、「はい」が現在の選択でない場合、フィールドが非表示になることを意味する必要があります。

于 2013-07-27T11:21:18.240 に答える