Kendo-MVC ListView-如何获取选中行的复选框状态(选中或未选中）

Kendo -MVC ListView - How to Get Checkbox state(checked or not) on selected row

本文关键字：复选框 状态 ListView- 获取 Kendo-MVC 何获取      更新时间：2023-09-26

我正试图在每次单击特定行的复选框时捕捉复选框状态（选中或未选中）。我可以得到点击的行的id值，但我无法正确检索复选框状态，大多数时候都会返回false（即使选中了）。最后，我计划根据复选框状态编辑记录。

-根据模型值设置的复选框的"页面加载时"状态。

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>

给模板中的复选框一个ID不是一个好主意，因为会有多个输入元素具有这样的ID。

相反，我建议给它上课。

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

例如

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

首先，应该从输入元素中删除所有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>
相关文章：