必要に応じてフォーム要素を単純に表示または非表示にしないのはなぜですか?
次の (x)html を使用します。
<form enctype="form/multipart" method="post" action="">
<fieldset>
<legend>Cars:</legend>
<label for="cars">Do you have one, or more, cars?</label><input name="cars" id="cars" class="test" type="checkbox" />
<fieldset class="subSection" id="cars">
<input type="radio" name="numCars" value="1" />One
<input type="radio" name="numCars" value="2" />Two
<input type="radio" name="numCars" value="3" />Three
</fieldset>
</fieldset>
<fieldset>
<legend>Children:</legend>
<label for="kids">Do you have one, or more, children</label><input name="kids" id="kids" class="test" type="checkbox" />
<fieldset class="subSection" id="kids">
<input type="radio" name="numKids" value="1" />One
<input type="radio" name="numKids" value="2" />Two
<input type="radio" name="numKids" value="3" />Three
</fieldset>
</fieldset>
<fieldset>
<legend>Houses:</legend>
<label for="houses">Do you have one, or more, houses</label><input name="houses" id="houses" class="test" type="checkbox" />
<fieldset class="subSection" id="houses">
<input type="radio" name="numHouses" value="1" />One
<input type="radio" name="numHouses" value="2" />Two
<input type="radio" name="numHouses" value="3" />Three
</fieldset>
</fieldset>
</form>
そしてjQuery(これは整頓されている可能性がありますが、私自身はまだ新しいので、「概念実証」のみです。恐れています):
$(document).ready(
function() {
// hide the sub-sections
$('fieldset.subSection').hide();
// show subsections onClick of the .test checkboxes
$('input.test').click(
function() {
$(this).next('fieldset.subSection').slideToggle('slow');
}
)
}
);
ライブデモは現在次の場所にあります:http://davidrhysthomas.co.uk/so/subForms.html