Вы можете реструктурировать свой HTML, чтобы сделать вашу жизнь НАМНОГО проще.
Вот пример:
<style type="text/css">
#account_types > div { display: none; }
</style>
<div id="signupwrapper">
<div id="signupinner">
<h3 align="left"> GETSCENE REGISTRATION ! </h3>
<hr />
<div id="signup" style="border:thin; border-color:#666">
<h4 align="left">Please Choose One of The Following Account Types</h4>
<div id="accountswrapper">
<form id="accountchoice" name="accountchoice" method="post" action="">
<label for="personalfan">personal/fan</label>
<input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />
<label for="soloartist">Solo artist</label>
<input type="radio" name="radio" id="soloartist" value="radio2" />
<label for="band">band</label>
<input type="radio" name="radio" id="band" value="radio3" />
<label for="venue">venue</label>
<input type="radio" name="radio" id="venue" value="radio4" />
<label for="business">business</label>
<input type="radio" name="radio" id="business" value="radio5" />
<label for="service">service</label>
<input type="radio" name="radio" id="service" value="radio6" />
</form>
<hr />
<div id="account_types">
<div class="personalfan">1</div>
<div class="soloartist">2</div>
<div class="band">3</div>
<div class="venue">4</div>
<div class="business">5</div>
<div class="service">6</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#accountchoice').change(function() {
var divToShow = $(this).find('input:checked').attr('id');
$('#account_types > div').each(function() {
if($(this).hasClass(divToShow)) { $(this).show(); }
else { $(this).hide();}
});
});
$('#accountchoice').trigger('change');
});
</script>
Теперь, если вы обратите внимание на реструктуризацию, вы увидите несколько вещей. Во-первых, Div, которые содержали различные типы учетных записей, находятся внутри холдинга Div. Вам не нужно этого делать, но это облегчает их изоляцию. Вы могли бы так же легко дать им одинаковый класс для выполнения одной и той же задачи.
Во-вторых, теперь у них есть имена классов, которые совпадают с их ассоциированным идентификатором ввода. Это позволяет очень легко ссылаться на тот, который вы ищете, и в то же время позволяет легко прикоснуться к остальным. Так что теперь вы можете перебрать массив этих элементов, показать () Div, который идет вместе с выбранным радио, и скрыть () те, которые не являются. Все в несколько небольших шагов.
Это также значительно упрощает добавление новых частей в ваш код. В противном случае, если вы добавите новый раздел, вам нужно будет отредактировать каждый сделанный вами оператор if (), добавив новый раздел, чтобы убедиться, что он правильно отображается и скрывается.
Здесь вы можете увидеть некоторые возможности DOM. Гораздо более простой код, более простой в обслуживании, и вы можете использовать его позже.
Я тоже исправил ярлыки для вас.