Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   показать/убрать текст при переходе с кнопки на кнопу radio (https://javascript.ru/forum/misc/55115-pokazat-ubrat-tekst-pri-perekhode-s-knopki-na-knopu-radio.html)

zazula 14.04.2015 15:38

показать/убрать текст при переходе с кнопки на кнопу radio
 
Добрый день. Мне необходимо сделать кнопки radio с разными значениями, при нажатии на каждую внизу кнопки должен выводиться текст, а при переходе на другую кнопку он должен исчезать. Но у меня получилось сделать только так, что текст исчезает при нажатии на эту же кнопку второй раз, а при переходе на другую кнопку он не исчезает.
Подскажите, как можно доработать мой скрипт?

for($i=0;$i<$kol_oplata;$i++) {
	$oplata=mysqli_fetch_assoc($sql_oplata);
	if(isset($_POST['oplata'])) {$checked3='checked="checked"';}
else  {$checked3='';}

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="<?=$oplata['oplata_id'];?>"  <?=$checked3;?> onclick="var el = document.getElementById('test<?=$oplata['oplata_id'];?>'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> <?=$oplata['oplata_name'];?><br>

     <div id="test<?=$oplata['oplata_id'];?>" style="display:none"><?=$oplata['oplata_info'];?></div></label></p><?php }?>
  <label> </p>

ksa 14.04.2015 15:59

Цитата:

Сообщение от zazula
как можно доработать мой скрипт?

Это не скрипт, это ПШПшная писанина... Хотя раздел называется "Общие вопросы Javascript".

laimas 14.04.2015 16:08

for($i=0;$i<$kol_oplata;$i++) {

while($row = mysqli_fetch_assoc($sql_oplata)) {

if(isset($_POST['oplata'])) {$checked3='checked="checked"';}
else {$checked3='';}
- таким образом истина будет для всех кнопок

$check = $_POST['oplata'] && $_POST['oplata']==$r['oplata_id'] ? 'checked' : null;
?>

А тут в выводе html подставлять $check.

Если кнопок много, то лучше функцией.

zazula 15.04.2015 20:48

laimas, Спасибо, исправила у себя.
Но все же, может кто-нибудь подскажет, как сделать так, чтобы текст появлялся при нажатии на кнопку и исчезал при переходе на другую?

рони 15.04.2015 21:18

zazula,
покажите нормальный html -- может без скрипта обойдёмся

zazula 16.04.2015 09:48

while($oplata = mysqli_fetch_assoc($sql_oplata)) {
	$check = $_POST['oplata'] && $_POST['oplata']==$oplata['oplata_id'] ? 'checked' : null;

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="<?=$oplata['oplata_id'];?>"  <?=$check;?> onclick="var el = document.getElementById('test<?=$oplata['oplata_id'];?>'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> <?=$oplata['oplata_name'];?><br>
     <div id="test<?=$oplata['oplata_id'];?>" style="display:none"><?=$oplata['oplata_info'];?></div></label></p>
}

рони 16.04.2015 09:58

zazula,
html это не php

zazula 16.04.2015 10:59

а как тогда? у меня все вместе.
показать результат php?
<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="1"   onclick="var el = document.getElementById('test1'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> Наличными при получении заказа</label></p>
<div id="test1" style="display:none">Оплата производится наличными при получении товара, после проверки</div> 

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="2"   onclick="var el = document.getElementById('test2'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> Банковской картой при получении заказа</label></p>
<div id="test2" style="display:none">Оплата производится банковской картой через мобильный терминал при получении товара, после проверки</div> 

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="3"   onclick="var el = document.getElementById('test3'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> Пластиковой картой на сайте</label></p>
<div id="test3" style="display:none">Вы будете перенаправлены на сервис оплаты. Операции будут проходить в защищенном режиме.</div> 

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="4"   onclick="var el = document.getElementById('test4'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> Безналичный расчет</label></p>
<div id="test4" style="display:none">Мы согласуем дату доставки с Вами после оформления заказа. Укажите пожалуйста реквизиты компании, мы подготовим счет и пришлем его Вам по электронной почте. Необходимы полные реквизиты: наименование, ИНН, КПП, адреса, банковские реквизиты. Без них мы не сможем подготовить счет.</div>

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="5"   onclick="var el = document.getElementById('test5'); el.style.display = (el.style.display == 'block') ? 'none' : 'block';"/> Кредит</label></p>
<div id="test5" style="display:none">Для оформления кредита на вашу покупку, заполните анкету банка партнера. С вами свяжется работник банка для уточнения деталей и оформления документов.</div>

рони 16.04.2015 11:40

Открывашка 212 input type=radio
 
zazula,
всё это можно сделать без js немного поменяв структуру html
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
      window.onload = function() {
          var divs = document.querySelectorAll('.op + div'),
              inp = document.querySelectorAll('[name="oplata"]'),
              fn = function(input) {
                  input.onclick = function() {
                      Array.prototype.forEach.call(divs, function(div, i) {
                          div.style.display = inp[i].checked ? "block" : "none"
                      })
                  }
              };
          Array.prototype.forEach.call(inp, fn);
      }
  </script>
</head>

<body>

<p class="op"><label><input name="oplata"  class="oplata" type="radio" value="1"   /> Наличными при получении заказа</label></p>
<div  style="display:none">Оплата производится наличными при получении товара, после проверки</div>

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="2"   /> Банковской картой при получении заказа</label></p>
<div  style="display:none">Оплата производится банковской картой через мобильный терминал при получении товара, после проверки</div>

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="3"   /> Пластиковой картой на сайте</label></p>
<div  style="display:none">Вы будете перенаправлены на сервис оплаты. Операции будут проходить в защищенном режиме.</div>

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="4"   /> Безналичный расчет</label></p>
<div  style="display:none">Мы согласуем дату доставки с Вами после оформления заказа. Укажите пожалуйста реквизиты компании, мы подготовим счет и пришлем его Вам по электронной почте. Необходимы полные реквизиты: наименование, ИНН, КПП, адреса, банковские реквизиты. Без них мы не сможем подготовить счет.</div>

<p class="op"><label> <input name="oplata"  class="oplata" type="radio" value="5"   /> Кредит</label></p>
<div  style="display:none">Для оформления кредита на вашу покупку, заполните анкету банка партнера. С вами свяжется работник банка для уточнения деталей и оформления документов.</div>

</body>

</html>

zazula 16.04.2015 12:13

рони,
Спасибо вам ОГРОМНОЕ!!!! Я кучу форумов и сайтов перерыла в поисках, но ничего подобного не нашла!

html6 02.08.2015 22:50

рони, Спасибо!
А возможно заменить "radio" на "button" с этим же текстом на кнопке? Чтобы скрипт работал также как этот, но на основе "button"?

Если возможно, напишите, пожалуйста, скрипт и первые две кнопки для примера.

рони 03.08.2015 06:54

html6,
попробуйте сначала поиск по слову Открывашка на форуме

html6 03.08.2015 11:53

рони,
спасибо, сразу нашёл несколько ваших решений, которые даже больше подходят


Часовой пояс GMT +3, время: 11:59.