Question

我试图抓住复选框状态（选中或不选中）每次点击特定行上的复选框。我可以获取点击的行的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>

Answer 1

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

相反，我建议给它上课。

一旦你给它一个课程，你可以在所选行中找到该复选框并获得其状态。

e.g。

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

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

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

2 个答案: