HTML+CSS+JavaScript

Здравствуйте.
Пытаюсь сделать скрипт для конструктора забора. Т.е., нажимаем на кнопку "поперечный брус", появляется брус (блок с картинкой), нажимаем что-нибудь другое, появляется "сплошной забор" (новый блок с картинкой) и т.д. Как это выглядеть прикладываю картинки для ясности.
Но я только учусь яваскрипту и тут же возникло много вопросов. Пока задам первый.
Во первых, что происходит в коде

<div id="konstructor">          <div id="zabor">            <div id="zaglushki"></div>            <div id="lagi"></div>            <div id="beton"></div>          </div>          <div id="doska_spl"></div>          <div id="zazor"></div>                      <div id="vibor">             <span class="zag">Постройте забор</span>             <form name="form1" action="" method="">               <input type="checkbox" name="check1" onclick="checkInvis();" class="checkAndRadio" autocomplete="off" /><span>Столбцы с заглушкой с метал. уголками</span>               <input type="checkbox" name="check2" onclick="checkInvis();" class="checkAndRadio" autocomplete="off" /><span>Поперечный брус</span>               <input type="checkbox" name="check3" onclick="checkInvis();" class="checkAndRadio" autocomplete="off" /><span>Строганная доска</span>               <input type="radio" name="rad1" autocomplete="off" /><span class="radio" >Укладка с зазобром</span>               <input type="radio" name="rad2" autocomplete="off" /><span class="radio">Сплошной</span>               <input type="checkbox" name="check4" onclick="checkInvis();" class="checkAndRadio" autocomplete="off" /><span>Бетонирование</span>             </form>          </div>       </div>

В стилях css для появления какого-нибудь блока к примеру

#zaglushki {         width: 629px;         height: 252px;         background: url(images/zaglushki.png) no-repeat;         position: absolute; bottom:75px;         display: none;         z-index:4;       }       #lagi {         width: 557px;         height: 156px;         background: url(images/lagi.png) no-repeat;         position: absolute; top:37px;         display: none;         z-index:5;       }

Но с яваскрипт беда полная. Работать работает (правда не до конца, это еще будет вопрос), но получается говнокод. А если уж начинать изучать, то надо привыкать к правильному программированию.

<script type="text/javascript"language="javascript">       <!--              function checkInvis ()       {         if (document.form1.check1.checked == true)         {           document.getElementById('zaglushki').style.display = 'inline';         }         else         {           document.getElementById('zaglushki').style.display = 'none';         }                           if (document.form1.check2.checked == true)         {           document.getElementById('lagi').style.display = 'inline';         }         else         {           document.getElementById('lagi').style.display = 'none';         }

И т.д.... Ужас просто. Надо как-то использовать switch, но не знаю даже как. Подскажите пожалуйста

ну как вариант дайте имена инпутам такие же как id дивов, и тогда обойдетесь одним if
вместо id подставите name инпута

Совершенно непонятно тогда будет где имя дива, а где input. И вообще тогда непонятно каким образом всё это можно в один if заключить

Возникает еще такая проблема. Когда пользователь должен выбрать "строганная доска", то radio у "сплошной" должна быть тоже активна.
Ладно, делаем условие для этого, учитывая что radio с именем rad2 должно быть выключено

if (document.form1.check3.checked == true || document.form1.rad2.checked == false)         {           document.getElementById('doska_spl').style.display = 'inline';           document.form1.rad2.checked = true;         }                  else         {           document.getElementById('doska_spl').style.display = 'none';           document.form1.rad2.checked = false;         }

Вопрос. А если "Строганная доска" (имя chek3) выключена и пользователь нажимает на радиокнопку "сплошной"? По идее должен стать активен чекбокс с именем chek3, соответственно сама радиокнопка и появиться картинка. Делаем так

/*if(document.form1.rad2.checked == true || document.form1.check3.checked == false)         {           document.form1.check3.checked = true;         }*/

Поставил пока в комментарии, потому что тут же перестает работать. Не могу понять как связать нормально кнопку чекбокс и радио

Пример
http://jsfiddle.net/pp9WC/17/

К сожалению это не чистый javascript, это с использованием jquery.

Слишком сложный для понимая код, что-нибудь попроще можно. Я только учусь.
Но даже он не работает. Только кода срабатывает chek3, то появляется заборчик, но радиокнопка вообще теперь ни одна не активна и вообще радиокнопки не работают теперь

Не работает в вашем скрипте или в приведенном мной примере?

Я ваш код к себе вставил. Работает только выбираю "строганная доска", но так как Вы класс doska сделали у обоих блоков, то естественно чекбоксы у них будут у обоих неактивны. А мне надо чтоб когда нажимаю "строганная доска", тут же активировался и чекбокс "сплошной". Попытался класс другой задать этому чекбоксу но без результатно. В таком коде я не силен уже

Если вы ставили код к себе то не забыли ли вы, подключить jquery?

в head нужно добавить что нить типа

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

и код заключить в

$(document).ready(function(){     //код });

Всё равно не работает. Выкладываю тогда полный архив

убирайте из input onclick, верните value как у меня, и посмотрите на name у радио и все заработает

с name все в порядке, rad1 и rad2. Из какого инпута убрать onclick. Там его и нет, или это в скрипте где-то, но не нашел.

Нашел. Но не совсем так как надо. При выбранной "строганная доска" автоматом должна быть активна радиокнопка с name="rad2" (сплошной)
И работает очень коряво. Чтоб заработало надо нажимать повторно

потому что с name не в порядке

а также почистите от вашего старого мусора

У radio должен быть одинаковый нейм если вы хотите что бы выбиралось или то или то.

У вас везде в input есть onclick. В выложенном вами архиве

От мусора почитил, name у радио сделал одинаковый.
1. Если выбрать сразу же какую-нибудь радиокнопку, то ничего не будет происходить.
Видимо еще один обработчик надо писать для каждой из них.
2. Если выбрать чекбокс "строганная доска" то ничего не произойдет, если не нажать повторно

ну давайте еще раз выложите что получилось, гляну у меня ваш забор отлично строится видимо где то все таки у вас ошибка попрежнему

Вот когда заходим на страницу (можем обновить), то тут же выбираем какую-нибудь радиокнопочку, то ничего не будет происходить. Пока мы два раза причем не ткнем по чекбоксу

уберите onclick еще раз вам говорю, почистите от мусора!!!

Вы меня извините, но он же убирается только у радиокнопок, и его там нет

<input type="radio" name="rad" value='zazor' autocomplete="off" /><span class="radio" >Укладка с зазобром</span>               <input type="radio" name="rad" value='doska_spl' autocomplete="off" /><span class="radio">Сплошной</span>

уберите его везде, у всех input, он не нужен совершенно в этом конкретном примере

Я оставил его у других инпутов, а сам скрипт Ваш перенес выше той функции что у меня написана и всё заработало.

Зачем вы оставили onclick вы может сказать? Зачем вам ваши функции если они не используются? Сейчас в том виде в котором они есть, они мусор, который в любой момент может выдать вам непредвиденный результат.

Почему не работают. Другие-то кнопки как раз используют эту функцию при клике. А если я уберу, то работать будет только одна с чекбоксом в свзяке с радиокнопочками. Я бы с радостью избавился от этого мусора, но не знаю как обойтись без этого, как упросить всю эту ересть, что я писал до этого.

я вам уже все написал мой код обрабатывает ВСЕ чекбоксы и ВСЕ radio, ваши функции не несут сейчас никакой полезной нагрузки, ваши oncklick тоже лишние, конечно если вы вернете в код value, как я вам писал, но вы так и не сделали.

Там только на срабатывание чекбокса с именем "check3", но у меня и другие есть

Сейчас пробую под другой писать, чтоб без онклика для check2, но не получается, потому что непонятен код ваш во многом

$('input[name!=check2]').on('click', function () {         var id = '#'+$(this).val();         if ($(this).prop('checked')) {             $('input[name=check3]').prop('checked', true);             $(id).css({'display': 'block'});         } else {             $(id).css({'display': 'inline'});         }         });                  $('input[name=check2]').on('click', function () {             if ($(this).prop('checked')) {                 $('#lagi').css({'display': 'block'});             }             else {               $(id).css({'display': 'inline'});             }         });

Вот так у вас все должно выглядеть!!!

<input type="checkbox" name="check1" value="zaglushki" class="checkAndRadio" autocomplete="off" /><span>Столбцы с заглушкой с метал. уголками</span>               <input type="checkbox" name="check2" value="lagi" class="checkAndRadio" autocomplete="off" /><span>Поперечный брус</span>               <input type="checkbox" name="check3" class="checkAndRadio" autocomplete="off" /><span>Строганная доска</span>               <input type="radio" name="rad" value='zazor' autocomplete="off" /><span class="radio" >Укладка с зазобром</span>               <input type="radio" name="rad" value='doska_spl' autocomplete="off" /><span class="radio">Сплошной</span>               <input type="checkbox" name="check4" value="beton"class="checkAndRadio" autocomplete="off" /><span>Бетонирование</span>

$(document).ready(function(){              $('input[name!=check3]').on('click', function () {         var id = '#'+$(this).val();         if ($(this).prop('checked')) {             if ($(this).prop('type') == 'radio') {                 $('.doska').css({'display': 'none'});                 $('input[name=check3]').prop('checked', true);             }                 $(id).css({'display': 'block'});         } else {             $(id).css({'display': 'none'});         }         });         $('input[name=check3]').on('click', function () {             if ($(this).prop('checked')) {                 $('.doska').css({'display': 'none'});                 $('input[type=radio][value=doska_spl]').prop('checked', true);                 $('#doska_spl').css({'display': 'block'});             } else {                 $('.doska').css({'display': 'none'});                 $('input[type=radio]').prop('checked', false);             }         });              });

Оно так и есть. Только если убрать onclik то вообще другие перестают работать. У меня есть другие инпуты с чекбоксами. А к ним идет функция как раз checkInvis () при срабатывании клика

нет оно НЕ так и есть.
обратите внимание в какой раз я вам говорю верните value, может вы приглядитесь к моей версии вашего html и поймете, почему я этого прошу.

если есть еще какие-то input, те которые вы здесь не приводите, так там и используйте свою функцию.

Да, очень виноват. Убрал все же onclick, убрал свою функцию ужасную, и доставил value. Всё также работает.
Но я никак не могу понять почему? Ведь в вашем коде нет проверки на check2, check1 и т.д. Как же так?

Первая функция обрабатывает все кроме check3, ей не так важно name сколько value который совпадает c id дива который нужно скрыть или показать.

Вторая обрабатывает только check3

Как я понял как раз строка

var id = '#'+$(this).val();

и указывает что переменная id будет равняться значению value, которое совпадает с дивом?
А зачем тогда внутри функция стоит на проверку радиокнопочек?

if ($(this).prop('type') == 'radio') {                 $('.doska').css({'display': 'none'});                 $('input[name=check3]').prop('checked', true);             }

Теперь скрипт стал меньше намного, но сложноват пока в моем знании. Спасибо Вам большое, что убедили меня кое в чем и сильно помогли

Проверка на radio нужна для того чтобы скрыть ненужные дивы и чтобы поставить галочку в check3