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更改为id ='＃= 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>"

你可以通过它获得单选按钮ID。

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

动态生成单选按钮并获取所选的单选按钮ID

1 个答案: