PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Проверка radio button JavaScript

Форумы портала PHP.SU » PHP » Напишите за меня, пожалуйста (Модератор: SAD)

Страниц (1): [1]

Описание: Помогите советом

Поиск в теме | Версия для печати

shadiq	Отправлено: 24 Ноября, 2016 - 15:16:33
Новичок Покинул форум Сообщений всего: 5 Дата рег-ции: Нояб. 2016 Помог: 0 раз(а)	Добрый день, возник вопрос, есть 3 группы radio button, нужно что-бы при различных комбинациях выводилась определённая картинка, под каждую комбинацию своя. Помогите советом как это организовать ? CODE (html): скопировать код в буфер обмена <input type="radio" name="1" class="radio" id="radio-1" value="001" > <input type="radio" name="1" class="radio" id="radio-002" value="002"> <input type="radio" name="1" class="radio" id="radio-003" value="003" > <input type="radio" name="2" class="radio" id="radio-004" value="004" > <input type="radio" name="2" class="radio" id="radio-005" value="005" > <input type="radio" name="2" class="radio" id="radio-006" value="006" > <input type="radio" name="3" class="radio" id="radio-007" value="007" > <input type="radio" name="3" class="radio" id="radio-008" value="008" > <input type="radio" name="3" class="radio" id="radio-009" value="009" > Полный HTML код CODE (html): скопировать код в буфер обмена <html> <head> <title>asdqwe</title> <style type="text/css"> div.image1 {float:left; margin-left: 5px;} div.image2 {float:left; margin-left: 5px;} div.image3 {float:left; margin-left: 5px;} .image1:first-child, .image2:first-child, .image3:first-child { clear: both;} </style> </head> <body> <p>Pick materials</p> <div class="color-params" id="col-params" style="display: block;"> <p> Choose a color </p> <div class="image1"> <div id="image001"> <img src="\Users\cruel\Desktop\htmllll\color1.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-1" value="001" > "color1" </p> </div> <div class="image1"> <div id="image002"> <img src="\Users\cruel\Desktop\htmllll\color2.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-2" value="002" > "color2" </p> </div> <div class="image1"> <div id="image003"> <img src="\Users\cruel\Desktop\htmllll\color3.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-3" value="003" > "color3" </p> </div> </div> <div class="elbow-params" id="el-params" > <div class="image2"> <div id="image004"> <img src="\Users\cruel\Desktop\htmllll\elbow1.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-4" value="004" > "elbow1" </p> </div> <div class="image2"> <div id="image005"> <img src="\Users\cruel\Desktop\htmllll\elbow2.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-5" value="005" > "elbow2" </p> </div> <div class="image2"> <div id="image006"> <img src="\Users\cruel\Desktop\htmllll\elbow3.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-6" value="006" > "elbow3" </p> </div> <div class="wheel-params" id="whl-params" style="display:block;"> <div class="image3"> <div id="image007"> <img src="\Users\cruel\Desktop\htmllll\wheel1.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-7" value="007" > "wheel1" </p> </div> <div class="image3"> <div id="image008"> <img src="\Users\cruel\Desktop\htmllll\wheel2.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="1" class="radio" id="radio-8" value="008" > "wheel2" </p> </div> <div class="image3"> <div id="image009"> <img src="\Users\cruel\Desktop\htmllll\wheel3.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="3" class="radio" id="9" value="9" > "wheel3" </p> </div> </body> </html> (Отредактировано автором: 24 Ноября, 2016 - 15:43:59)

armancho7777777	Отправлено: 24 Ноября, 2016 - 15:37:44
Активный участник Покинул форум Сообщений всего: 4526 Дата рег-ции: Февр. 2011 Откуда: Москва Помог: 221 раз(а)	jsfiddle (Отредактировано автором: 24 Ноября, 2016 - 16:00:57)

shadiq	Отправлено: 24 Ноября, 2016 - 16:09:41
Новичок Покинул форум Сообщений всего: 5 Дата рег-ции: Нояб. 2016 Помог: 0 раз(а)	armancho7777777 пишет: jsfiddle А можно уточнить еще такой момент, каким образом я должен указать картинки которые будут выводиться при определённо нажатых radiobutton?

armancho7777777	Отправлено: 24 Ноября, 2016 - 16:13:08
Активный участник Покинул форум Сообщений всего: 4526 Дата рег-ции: Февр. 2011 Откуда: Москва Помог: 221 раз(а)	Код читайте внимательно. (Добавление) и откройте консоль. (Добавление) shadiq пишет: при различных комбинациях выводилась определённая картинка, под каждую комбинацию своя. Я думал, у Вас уже пронумерованные картинки) Сейчас только дошло, что Вам надо (декартово произведение множеств). Минуту... (Отредактировано автором: 24 Ноября, 2016 - 18:45:20)

armancho7777777	Отправлено: 24 Ноября, 2016 - 18:34:03
Активный участник Покинул форум Сообщений всего: 4526 Дата рег-ции: Февр. 2011 Откуда: Москва Помог: 221 раз(а)	jsfiddle CODE (html): скопировать код в буфер обмена <div id="rows" class="rows"> <div class="row"> <input type="radio" name="1" class="radio"> <input type="radio" name="1" class="radio"> <input type="radio" name="1" class="radio"> </div> <div class="row"> <input type="radio" name="2" class="radio"> <input type="radio" name="2" class="radio"> <input type="radio" name="2" class="radio"> </div> <div class="row"> <input type="radio" name="3" class="radio"> <input type="radio" name="3" class="radio"> <input type="radio" name="3" class="radio"> </div> </div> <img id="image" class="hidden"> imageToggle (Отобразить) CODE (javascript): скопировать код в буфер обмена var imageToggle = (function(doc){ var box = doc.querySelector('#rows'), rows = box.querySelectorAll('.row'), rowCount = rows.length, toggleAll = [], cartes = [], data = {}, /** * @type Function * @return {[]} / getCheckeds = function() { var checkeds = toggleAll.filter(function(toggle){ return toggle.checked; }); return checkeds.map(function(toggle, i){ return toggle.value; }); }, /* * @type Function * @param {[]} arr * @return {[]} / cartesianProduct = function (arr) { return arr.reduce(function(a,b){ return a.map(function(x){ return b.map(function(y){ return x.concat(y); }) }).reduce(function(a,b){ return a.concat(b) },[]) }, [[]]) }; [].forEach.call(rows, function(row, i){ var toggles = row.querySelectorAll('[type="radio"]'); cartes[i] = []; [].forEach.call(toggles, function(toggle, j){ cartes[i][j] = toggle.value = j; toggleAll.push(toggle); }); }); cartes = cartesianProduct(cartes); return function(images, callBack) { callBack = callBack \|\| function(){}; if(images.length != cartes.length) { throw new Error('Должно быть ' + cartes.length + ' изображений'); } images.forEach(function(image, i){ data[cartes[i].join('-')] = image; }); toggleAll.forEach(function(toggle){ toggle.addEventListener('change', function(){ var checkeds = getCheckeds(); if(checkeds.length == rowCount) { callBack(data[checkeds.join('-')]); } }); }); }; })(document); CODE (javascript): скопировать код в буфер обмена var image = document.querySelector('#image'), len = Math.pow(3, 3), images = [], i = 0; for(; i < len; i++) { images.push('image-' + (i + 1) + '.jpeg'); } imageToggle(images, function(imageUrl){ alert(imageUrl); image.src = imageUrl; image.classList.remove('hidden'); }); (Добавление)* Должно быть 27 изображений (3 группы по 3 радио-кнопки). CODE (javascript): скопировать код в буфер обмена Math.pow(3, 3) // 27 (Добавление) shadiq пишет: каким образом я должен указать картинки Массив изображений: armancho7777777 пишет: CODE (javascript): скопировать код в буфер обмена imageToggle(images, function(imageUrl){ (Отредактировано автором: 24 Ноября, 2016 - 21:36:32)

shadiq	Отправлено: 25 Ноября, 2016 - 22:39:55
Новичок Покинул форум Сообщений всего: 5 Дата рег-ции: Нояб. 2016 Помог: 0 раз(а)	armancho7777777 пишет: CODE (javascript): скопировать код в буфер обмена imageToggle(images, function(imageUrl){ а можешь посоветовать как вместо картинок jpg выводить такие изображения ? Например https://sketchfab[dot]com/models/176[dot][dot][dot]abe284c0d4/embed

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« Напишите за меня, пожалуйста »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.