动态表中的复选框的JQuery选择器不起作用 [英] JQuery selector for checkbox in dynamic table not works

问题描述

我的视图中有一个html表。喜欢

Hi,
I have a html table in my view. like

<table id="dtsResult" width="100%" class="table table-striped table-bordered"></table>

i有一个返回jason结果的jquery函数。在此之后我将这些数据绑定到我的表。它工作正常。但现在我想从标题复选框中选中所有复选框。这是我的代码：

i have a jquery function that return jason result. after this i bind this data to my table. it works fine . but now i want to select all check-box from header checkbox. here is my code:

  function fetchData(whichPage) {
var request = $.ajax({
            //url: "http://ns1.ownership-data.com/new/ODBAppSrv.asmx/SearchResultsJson",
            url: '@Url.Action("SearchResultsJson", "NewResult")',
            method: "POST",
            data: { "page": whichPage }
        });

        request.done(function (data) {
 var items = [];
            $.each(data, function (key, val) {
                var bgClass = (key % 2 == 0) ? "search-result-bg" : "";
                var item = '<tr class="' + bgClass + '">';
               item += '<td><input type="checkbox" id=' + val["RecordID"] + ' value=' + val["RecordID"] + ' name="chkres" class="chkres" /> </td>';
              //  item += '<td></td>';
                item += '<td>' + val["RecordID"] + '</td>';
                item += '<td>' + val["UnitNo"] + '</td>';
                item += '<td>' + val["StreetNo"] + ' ' + val["StreetName"] + ' ' + val["Suburb"] + '</td>';
                item += '<td>' + val["O_SurName"] + '<br/>' + val["O_StreetNo"] + '  ' + val["O_StreetName"] + '  ' + val["O_Suburb"] + '</td>';              
                item += '</tr>';
                items.push(item);
            });

            if (items.length > 0) {
                var result = '<div id="loadingOverlay"></div><tr class="search-result-heading">';               
               result += '<td><input type="checkbox" id="CheckAllRes" class="allres" />Select All</td>';
                result += '<td>Record ID</td>';
                result += '<td>Unit</td>';
                result += '<td>Property Details</td>';
                result += '<td>Owners Details</td>';
                           
                result += '</tr>';
                result += items.join("");
                $("#dtsResult").html(result);
            } );
}

现在这里是我的jquery函数但不能正常工作。

now here is my jquery function but not works properly.

<script type="text/javascript">    
    $(document).ready(function () {
        $(document).ready(function () {
           
        $('.allres').on("click", function () {
            var chk = $(this).is(':checked');
            alert(chk);
            $(".chkres", "#dtsResult").each(function () {
                if (chk) {

                    $(".chkres", "#dtsResult").prop("checked", true);
                }
                else {
                    $(".chkres", "#dtsResult").prop("checked", false);
                }
            });
        }); });
</script>

我是怎么做的。

谢谢。

How i do this.
Thanks.

推荐答案

.ajax（{
// url：http://ns1.ownership-data.com/new/ODBAppSrv.asmx/SearchResultsJson，
url：'@ Url。动作（SearchResultsJson，NewResult）'，
方法：POST，
数据：{page：whichPage}
}）;

request.done（function（data）{
var items = [];

.ajax({ //url: "http://ns1.ownership-data.com/new/ODBAppSrv.asmx/SearchResultsJson", url: '@Url.Action("SearchResultsJson", "NewResult")', method: "POST", data: { "page": whichPage } }); request.done(function (data) { var items = [];

.each（data，function（key，val）{
var bgClass =（key％2 == 0）？search-result-bg：;
var item ='< tr class ='+ bgClass +'>' ;
item + ='< td>< input type =checkboxid ='+ val [RecordID] +'value ='+ val [RecordID] +'name =chkres class =chkres/>< / td>';
// item + ='< td>< / td>';
item + ='< td>'+ val [RecordID] +'< / td>';
item + ='< td>'+ val [UnitNo] +'< / td>';
item + ='< td>'+ val [StreetNo] +''+ val [StreetName] +''+ val [郊区] +'< / td>';
item + = '< td>'+ val [O_SurName] +'< br />'+ val [O_StreetNo] +''+ val [O_StreetName] +''+ val [O_Suburb] + '< / td>';
item + ='& LT; / TR>';
items.push（item）;
}）;

if（items.length> 0）{
var result ='< div id =loadingOverlay>< / div>< tr class =search-result -heading>';
结果+ ='< td>< input type =checkboxid =CheckAllResclass =allres/>选择全部< / td>';
结果+ ='< td>记录ID< / td>';
结果+ ='< td>单位< / td>';
结果+ ='< td>属性详情< / td>';
结果+ ='< td>所有者详细信息< / td>';

结果+ ='< / tr>';
result + = items.join（）;

.each(data, function (key, val) { var bgClass = (key % 2 == 0) ? "search-result-bg" : ""; var item = '<tr class="' + bgClass + '">'; item += '<td><input type="checkbox" id=' + val["RecordID"] + ' value=' + val["RecordID"] + ' name="chkres" class="chkres" /> </td>'; // item += '<td></td>'; item += '<td>' + val["RecordID"] + '</td>'; item += '<td>' + val["UnitNo"] + '</td>'; item += '<td>' + val["StreetNo"] + ' ' + val["StreetName"] + ' ' + val["Suburb"] + '</td>'; item += '<td>' + val["O_SurName"] + '<br/>' + val["O_StreetNo"] + '  ' + val["O_StreetName"] + ' ' + val["O_Suburb"] + '</td>'; item += '</tr>'; items.push(item); }); if (items.length > 0) { var result = '<div id="loadingOverlay"></div><tr class="search-result-heading">'; result += '<td><input type="checkbox" id="CheckAllRes" class="allres" />Select All</td>'; result += '<td>Record ID</td>'; result += '<td>Unit</td>'; result += '<td>Property Details</td>'; result += '<td>Owners Details</td>'; result += '</tr>'; result += items.join("");

（＃dtsResult）。html（result）;
}）;
}

("#dtsResult").html(result); } ); }

现在这里是我的jquery函数但不能正常工作。

now here is my jquery function but not works properly.

<script type="text/javascript">

这篇关于动态表中的复选框的JQuery选择器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！