При нажатии на кнопку, вывод названия этой кнопки и определенного текста

190

07 июня 2018, 12:30

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

Пример:

    <div>
  <label>
    <input type="radio" data-id="1" name="group_1"></input>Радио 1
  </label>
  <label>
    <input type="radio" data-id="2" name="group_1"></input>Радио 2
  </label>
</div>
<div>
  <label>
    <input type="radio" data-id="3" name="group_2"></input>Радио 3
  </label>
  <label>
    <input type="radio" data-id="4" name="group_2"></input>Радио 4
  </label>
</div>
<button id="click_me">Click ME</button>
<div id="text"></div>
<div id="text_button_0"></div>
<div id="text_button_1"></div>

Результат должен иметь такой вид:

Название кнопки из 1-й группы: Название кнопки
Название кнопки из 2-й группы: Название кнопки
Название кнопки из n-ой группы: Название кнопки
Определенный текст, который зависит от выбранных радио.

Желательно чтобы текст перед радио, и текст который получается при выборе кнопок, был в формате html - кода. Также это нужно сделать для любого количества радиокнопок

Answer 1

let textObj = { 
  '13': '<span style="color: red;">Text 13</span>', 
  '23': '<span style="color: green;">Text 23</span>', 
  '14': '<span style="color: red;">Text 14</span>', 
  '24': '<span style="color: green;">Text 24</span>', 
}; 
let textRadioObj = { 
  'group_0': '<span style="color: red;">Aloha 1</span>', 
  'group_1': '<span style="color: green;">Aloha 2</span>', 
}; 
 
$('#click_me').click(function() { 
  let textName = ''; 
  $('input[type=radio]').each(function() { 
    if ($(this).prop("checked")) { 
      textName += $(this).data("id"); 
      let name = $(this).prop("name"); 
      $('#text_' + name).html(textRadioObj[name] + ': ' + $(this).parent().text()); 
    } 
  }); 
  if (textObj[textName]) { 
    $('#text').html(textObj[textName]); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <label> 
    <input type="radio" data-id="1" name="group_0"></input>Радио 1 
  </label> 
  <label> 
    <input type="radio" data-id="2" name="group_0"></input>Радио 2 
  </label> 
</div> 
 
<div> 
  <label> 
    <input type="radio" data-id="3" name="group_1"></input>Радио 3 
  </label> 
  <label> 
    <input type="radio" data-id="4" name="group_1"></input>Радио 4 
  </label> 
</div> 
<button id="click_me">Click ME</button> 
 
<div id="text"></div> 
<div id="text_group_0"></div> 
<div id="text_group_1"></div>