Динамически сгенерировать радиокнопку и получить выбранную радиокнопку ID

Question

В основном, что я пытаюсь сделать, мне нужно сгенерировать набор кнопок Radio по отношению к значениям в вызове веб-службы, и мне нужно получить выбранное значение всякий раз происходит изменение состояния переключателя. Мне удалось создать переключатели со значениями в ответе вызова API. Но я не могу зафиксировать событие изменения в переключателе. Я пытаюсь работать с картой KendoUI.

Ниже приведена часть кода, который я опробовал.

<div data-role="drawer" id="refineSearchResults" data-position="left" style="width: 50%; background-color: #f5f5f5;" data-swipe-to-open="false"> 
     <div id="refineHolderDiv" style="height:100%"> 
      <div style="height:40%"> 
       <ul data-role="listview" style="background-color:#FFFFFF"> 
        <li style="line-height:inherit"> 
         <span class="item-title" style="text-align:center">Refine Data</span> 
        </li> 
       </ul> 
      </div> 
      <div id="selctionsForRefinement" style="height:inherit;align-content:space-around"> 
       <ul style="height:auto;list-style-type:none"> 
        <li style="margin-top:5%"> 
        <label style="background-color:aliceblue"> 
        DIVSION</label></li> 
        <li style="margin-top: 5%"> 
         <ul data-role="listview" data-style="inset" data-type="group" id="listView1"></ul> 
        </li> 
        <li style="margin-top: 5%"> 
        <label style="background-color:aliceblue"> 
         BUSINESS UNIT 
        </label> 
        </li> 
        <li style="margin-top: 5%"> 
         <ul data-role="listview" data-style="inset" data-type="group" id="listView2"></ul> 
        </li> 
        <li style="margin-top: 5%"><label style="background-color:aliceblue">AGENCY</label></li> 
        <li style="margin-top: 5%"> 
         <ul data-role="listview" data-style="inset" data-type="group" id="listView3"></ul> 
        </li> 
        <li style="margin-top: 5%"><label style="background-color:aliceblue">DEPARTMENT</label></li> 
        <li style="margin-top: 5%"> 

         <ul data-role="listview" data-style="inset" data-type="group" id="listView4"></ul> 
          <!-- <select id="multiselect2" multiple="multiple"></select> --> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <script> 
      var dataSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url: "http://some_web_link", 
         dataType: "json" 
        } 
       } 
      }); 
      $("#listView1").kendoListView({ 
       dataSource: dataSource, 
       template: "<input type=radio name=abc1 onClick=categoryswitch>#:division#</input><br>" 
      }); 
      $("#listView2").kendoListView({ 
       dataSource: dataSource, 
       template: "<input type=radio name=abc2>#:division#</input><br>" 
      }); 
      $("#listView3").kendoListView({ 
       dataSource: dataSource, 
       template: "<input type=checkbox name=abc3 id=#:division# >#:division#</input><br>" 
      }); 
      $("#listView4").kendoListView({ 
       dataSource: dataSource, 
       template: "<input type=checkbox name=abc4 id=#:division#>#:division#</input><br>" 
      }); 
      function categoryswitch(e) { 
       alert('test'); 
      } 
      kendo.init($("#listView3")); 
     </script> 
     </div> 

Это метод, который я пробовал до сих пор. Пожалуйста, дайте мне знать, есть ли какие-либо решения проблемы, которые у меня есть. Также, если есть какая-то другая альтернатива тому, что я пытаюсь, пожалуйста, дайте мне знать.

Благодаря

Answer 1

Пожалуйста, попробуйте следующие изменения: Для кендо вы можете изменить свой идентификатор к идентификатору = '# = YourId HeRe #'.

template: "<input type=radio name=abc1 onClick=categoryswitch>#:division#</input><br>" 

Для

template: "<input id='1' type='radio' name='abc1' onclick='categoryswitch(event)'>#:division#</input><br>" 

и вы можете получить радио идентификатор кнопки на.

function categoryswitch(e) 
{ 
    alert(e.target.id); 
}