0
私は、ラジオボタンがクリックされたことに基づいて異なるテキストボックスを表示するためにCSSを使用しています。主に動作していますが、私のコードの下にある問題をリストします。隠しフォームの問題が再表示されない
CSS：
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 16px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.reveal-if-active label {
display: block;
margin: 0 0 3px 0;
}
.reveal-if-active input[type=text] {
width: 50%;
}
input[type="radio"]:checked ~ .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active {
opacity: 1;
max-height: 100px;
padding: 10px 20px;
-webkit-transform: scale(1);
transform: scale(1);
overflow: visible;
}
フォーム：
<h1>What group does this person belong to?</h1>
<br />
<form action="uploaderPerson.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $_GET["id"]; ?>"/>
<input type="hidden" name="action" value="2"/>
<input type="radio" name="option" value="Employer" id="Employer"> Employer<br>
<div class="reveal-if-active">
<label for="empname">Employer's Name: </label>
<input type="text" id="empname" name="empname" class="require-if-active" data-require-pair="#Employer" placeholder="empname">
<label for="email">Employer's Email: </label>
<input type="text" id="email" name="email" class="require-if-active" data-require-pair="#Employer" placeholder="email">
<label for="phone">Employer's Phone: </label>
<input type="text" id="phone" name="phone" class="require-if-active" data-require-pair="#Employer" placeholder="phone">
</div>
<br />
<input type="radio" name="option" value="Faculty"> Faculty<br>
<div class="reveal-if-active">
<label for="hiredate">Hire Date: </label>
<input type="text" id="hiredate" name="hiredate" class="require-if-active" data-require-pair="#Faculty" placeholder="hiredate">
<label for="isretired">Retired?: </label>
<input type="text" id="isretired" name="isretired" class="require-if-active" data-require-pair="#Faculty" placeholder="isretired">
<label for="degreeinstitute">Degree Institute: </label>
<input type="text" id="degreeinstitute" name="degreeinstitute" class="require-if-active" data-require-pair="#Faculty" placeholder="degreeinstitute">
</div>
<br />
<input type="radio" name="option" value="Student"> Student<br>
<div class="reveal-if-active">
<label for="graduation">Hire Date: </label>
<input type="date" id="graduation" name="graduation" class="require-if-active" data-require-pair="#Student" placeholder="mm/dd/yyyy">
</div>
<br /><br />
<input type="submit" value="Submit">
</form>
私の問題は、私は彼らのすべてが表示される1つのラジオボタンをクリックしたときです。私はその後、教員のボタンをクリックして、雇用者1人は遠ざかりますが、学生1人はアクティブなままです。それから私は学生をクリックし、教員1は最終的に消えます。それは大したことではありませんが、私は何が欠けているのか分かりません。私は単純なものを想像していましたが、どこでも見つけることができません。私はいくつかの人がこの種のものを助けるjavascriptを使用して知っているが、私はそれを使用して多くの運を持っていなかったと主に動作するように持っていた。すべての入力をいただければ幸いです。
：それは純粋なCSSにする必要がある場合は次の操作を行うことができます：//jquery.com）、CSSはこの種のDOM操作のためのものではありません。 – TricksfortheWeb