为什么不根据需要简单地显示或隐藏表单元素,而不是重定向到其他潜在的多个后续表单?
使用以下 (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://davidrhystomas.co.uk/so/subForms.html