Kendo -MVC ListView - 如何在所选行上获取复选框状态（已选中或未选中）

Question

i am trying to catch checkboxes state(checked or not) on every click to checkboxes on specific row.I can able to get the id value of row that clicked but i cannot retrieve the checkbox state properly,it returns false most of time(even if it's checked).At the end i am planning to edit records according to checkboxes state.

-On Page Load status of checkboxes set according to model value.

Html(razor)

    @(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

Kendo template:

   <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>

Answer 1

Giving an ID to a checkbox inside the template is not a good idea because there will be multiple input elements with such id.

Instead I would suggest giving it a class.

Once you give it a class you can find that checkbox within the selected row and get its state.

eg

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

Answer 2

first,all id and class tags should be removed from input elements.

Then add onClick event:

 <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>