Kendo -MVC ListView - 如何在选定的行上获取复选框状态（选中与否）答案

【问题标题】：Kendo -MVC ListView - How to Get Checkbox state(checked or not) on selected rowKendo -MVC ListView - 如何在选定的行上获取复选框状态（选中与否）
【发布时间】：2014-06-05 17:39:47
【问题描述】：

我试图在每次单击特定行上的复选框时捕获复选框状态（选中与否）。我可以获取单击的行的 id 值，但我无法正确检索复选框状态，它大部分返回 false时间（即使它被选中）。最后我打算根据复选框状态编辑记录。

-On Page Load 根据模型值设置的复选框的状态。

Html(剃须刀)

    @(Html.Kendo().ListView<AIS.UI.WebService.Proxy.DSrvAllService.NewsItem>()
            .Name("listView")
            .Events(e => e.Change("changeFunc"))
            .TagName("div")
            .Selectable()
            .ClientTemplateId("template")
            .AutoBind(true)

            .DataSource(dataSource => dataSource
            .Model(model => model.Id("ID"))
            .PageSize(5)
     //...Some another options

剑道模板：

   <div class="container-fluid" style="padding-right:0px;border-bottom:1px                                                solid   \\#d4d4d4">       
        <div class=" col-sm-4" style="padding-top: 2px; min-height: 35px;margin-right:-1px; border-right: 1px solid rgb(212, 212, 212)">
            <span class="bold" style="color: black;">#:Title#</span>
        </div>
     <div id="typeField"  class="col-sm-4" >
       @if(@ViewBag.type=="all")
       { 
              <label class="checkbox-inline">
             <input type="checkbox"  id="webCheckBox" value="web" checked = "checked" />

             <span style="vertical-align:middle">Web</span>
         </label>
         <label class="checkbox-inline">

             <input type="checkbox" id="ambulanceCheckBox" value="client" checked="checked" />
             <span>Ambulance Client</span>
         </label>

     }

         else{

          <label class="checkbox-inline">
             <input type="checkbox"  id="webCheckBox" value="web"  />
     @if (@ViewBag.type == "web")
     {  <input type="checkbox"  id="webCheckBox" value="web" checked="checked" />   }
             <span style="vertical-align:middle">Web</span>
         </label>
         <label class="checkbox-inline">

             <input type="checkbox" id="ambulanceCheckBox" value="client" />
             @if (@ViewBag.type == "client")
    {  <input type="checkbox" id="ambulanceCheckBox" value="client" checked="checked" />   }
             <span>Ambulance Client</span>
         </label>


         }

      </div>
    <div class="col-sm-2 pull-right " style="padding-right:0px;" >


       @* <a class="btn pull-right"  href="\\#"><span class="k-icon k-delete"></span></a>*@
    <a id="deletebutton" class="btn-old btn-default  pull-right k-button-icontext k-delete-button" ><span class="k-icon k-delete"></span></a>
    <a class="btn-old btn-default  pull-right" onClick="OpenAnnouncement('#:ID#')"><span class="k-icon k-edit"></span></a>
   @* <button id="opencasedetails" class="btn pull-right  btn-primary"  onClick="OpenAnnouncement('#:ID#')" type="button" >Edit</button>
    <button id="deletecasedetails" class="btn pull-right  btn-primary" onClick="deleteAnnouncement('#:ID#')"  type="button" >Delete</button>*@

    </div>


        </div>
    </script>

Js：

       <script >
         function changeFunc(e)
        {
          var index = this.select().index(),
          dataItem = this.dataSource.view()[index];

        //id of the selected row's record 
         var id = dataItem.ID;

        //The section that trying the retrieve checkboxes state on click
        //Failed!!!
        var isWeb = $('#ambulanceCheckBox').is(':checked');
        var isClient = $('#webCheckBox').is(':checked');

        //Also Failed
        // var isWeb = $('#ambulanceCheckBox').prop('checked')
        // var isClient = $('#webCheckBox').prop(':checked');


    }

</script>

【问题讨论】：

标签： javascript jquery asp.net-mvc checkbox kendo-ui

【解决方案1】：

为模板内的复选框提供一个 ID 不是一个好主意，因为会有多个具有此类 ID 的输入元素。

相反，我建议给它上课。

一旦你给它一个类，你就可以在选定的行中找到该复选框并获取它的状态。

例如

function changeFunc(e) {
     alert(this.select().find(".myCheckBox").is(":checked"));
     ...
}

【讨论】：

谢谢，它给了我一个想法。我需要为每个复选框设置不同的类。所以我可以在单击时检索复选框的初始状态。
还有一件事是，我还需要找到点击了哪个复选框。尝试过// this.select().find(".mycheckbox1").change(function () 但是失败了跨度>

【解决方案2】：

首先，应从输入元素中删除所有 id 和 class 标签。

然后添加onClick事件：

 <input type="checkbox" onclick="checkboxChange(this)"  value="web"  checked="checked" />

JS：

   <script >
    function checkboxChange(e) {

        var check = e.checked;
        var value = e.value;

        var listview= $(e).closest(".k-listview").data("kendoListView");

        //Get Selected rows's data 
        var dataItem = listview.dataSource.view()[listview.select().index()];
        var id=dataItem.ID;
        alert("Last State: " + check + "/ Value: " + value + "/ Row id :" + id);
        };
   </script>

【讨论】：