ラジオボタンを動的に生成し、選択したラジオボタンIDを取得

Question

基本的には、Webサービスコールの値に関してラジオボタンのセットを生成する必要があり、選択した値を取得する必要がありますラジオボタン状態の変更が発生します。私は、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

は、次のように変更してみてください。 剣道についてあなたはID =に '＃= YourIdここで＃' をあなたのIDを変更することができます。

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

へ

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

、あなたはあなたでラジオボタンのIDを取得することができます。

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