Kendo -MVC ListView - 如何獲取選中行的複選框狀態（選中與否）

我試圖捕獲複選框狀態（選中與否）每次點擊複選框在特定row.I能夠得到id值點擊行但我無法正確檢索複選框狀態，它大部分時間（即使它被選中）都會返回false。最後，我打算根據複選框狀態編輯記錄。Kendo -MVC ListView - 如何獲取選中行的複選框狀態（選中與否）

- 在頁面根據模型值設置複選框的狀態。

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>

來源

2014-04-21 balron

給模板內的複選框賦予一個ID不是一個好主意，因爲會有多個具有這種id的輸入元素。

相反，我會建議給它一個類。

一旦你給它一個類，你可以找到所選行內的複選框，並獲得它的狀態。

例如

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

來源

2014-04-21 16:31:33

謝謝，這給了我一個idea.I需要爲每個checkbox.So設置不同的課程我可以檢索的初始狀態點擊時複選框。 – balron

要做的另一件事是，我還需要找到哪個複選框是clicked.tried // this.select（）。find（「。mycheckbox1」）。change（function（）但失敗 – balron

首先，應該從輸入元素中刪除所有的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>

來源

2014-04-22 07:51:27 balron

Kendo -MVC ListView - 如何獲取選中行的複選框狀態（選中與否）

回答

相關問題