Question

enter image description here

我正在做的是当复选框选中时我在隐藏字段中附加id，费用和测试名称但是当我在添加附加新隐藏字段之前得到计数时它给我错误的数字，不知道为什么

这是我的jquery代码：

$("input.checkBoxTests").live('change', function () {
    var charges = $('#sample-table-3').find('td.TestCharges#' + this.id).html();
    var TestName = $('#sample-table-3').find('td.TestName#' + this.id).html()
    if (this.checked) {
        $("#selectedTestsTable").find('tbody')
            .append($('<tr>')
            .attr('id', this.id)
            .attr('class', "bookedTest")
            .append($('<td>')
            .append($('#sample-table-3').find('td.TestName#' + this.id).html()

        )));
        var TestIdIndex = $("input.iHiddenTestId").length;
        var CheckingIndex = $("input.iHiddenCheck").length
        $('input.iHiddenCheck').each(function () {
            console.log("Checking id:" + $(this).id + ", value:" + $(this).val() + "count:" + CheckingIndex);
        });
        var newTestId = $("<input id='" + this.id + "' type='hidden' value='" + this.id + "' class='iHiddenTestId' name='Tests[" + TestIdIndex + "].TestId' />");
        $("form#ImgUpload").append(newTestId);
        $("form#ImgUpload").append("<input id='" + this.id + "' type='text' value='" + this.id + "' class='iHiddenCheck' name='Tests[" + CheckingIndex + "].TestId' />")
        var ChargesIndex = $("form#ImgUpload input.iHiddenCharges").length;
        var newCharges = $("<input id='" + this.id + "' type='hidden' value='" + charges + "' class='iHiddenCharges' name='Tests[" + ChargesIndex + "].Charges' />");
        $("form#ImgUpload").append(newCharges);
        var TestNameIndex = $("form#ImgUpload input.iHiddenTestName").length;
        var newTestName = $("<input id='" + this.id + "' type='hidden' value='" + TestName + "' class='iHiddenTestName' name='Tests[" + TestNameIndex + "].TestName' />");
        $("form#ImgUpload").append(newTestName);
    } else {
        $("#selectedTestsTable").find('tr#' + this.id).remove()
        $("form#ImgUpload").find('input.iHiddenTestId#' + this.id).remove();
        $("form#ImgUpload").find('input.iHiddenCharges#' + this.id).remove();
        $("form#ImgUpload").find('input.iHiddenTestName#' + this.id).remove();
    }
});

这是我的HTML：

<div style="max-height:490px;overflow:auto;" class="col-lg-12" id="genRequestContainer">

<form method="post" id="ImgUpload" enctype="multipart/form-data" data-ajax-success="SendRequestSuccess" data-ajax-failure="SendRequestFail" data-ajax-complete="SendRequestComplete" data-ajax-begin="SendRequestBegin" data-ajax="true" action="/HealthAccess/TestRequest/SendRequest?Length=11">    <input type="hidden" value="1" name="CliqPanelID">



</div>
<div id="panelTestsContainer"> 
<h3 class="header smaller lighter blue">Lab Tests</h3>


<div class="row">
<div style=" height:80%; overflow:auto;" class="col-lg-8">
<div class="table-header">
Results for Lab Tests
</div>

<div style="height:170px;padding-right: 0px !important;
padding-left: 0px !important;" class="col-lg-12">


<div role="grid" class="dataTables_wrapper" id="sample-table-3_wrapper"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"><div class="dataTables_filter" id="sample-table-3_filter"><label>Search: <input type="text" aria-controls="sample-table-3"></label></div></div></div><table class="table table-striped table-bordered table-hover dataTable" id="sample-table-3" aria-describedby="sample-table-3_info">
    <thead>
        <tr role="row"><th class="center sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label="

        : activate to sort column ascending">

        </th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label="
            Test Name
        : activate to sort column ascending">
            Test Name
        </th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label="
            Charges
        : activate to sort column ascending">
            Charges
        </th></tr>
    </thead>


<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="odd">
        <td class="center ">
        <label>
        <input type="checkbox" class="ace checkBoxTests" id="1668">
        <span class="lbl"></span>
        </label>
        </td>
        <td class="TestName " id="1668">B.P (                   /</td>
        <td class="TestCharges " id="1668">230</td>


    </tr><tr class="even">
        <td class="center ">
        <label>
        <input type="checkbox" class="ace checkBoxTests" id="1031">
        <span class="lbl"></span>
        </label>
        </td>
        <td class="TestName " id="1031">CBC &amp; ESR Profile</td>
        <td class="TestCharges " id="1031">280</td>


    </tr><tr class="odd">
        <td class="center ">
        <label>
        <input type="checkbox" class="ace checkBoxTests" id="877">
        <span class="lbl"></span>
        </label>
        </td>
        <td class="TestName " id="877">Urine Examination (DR)</td>
        <td class="TestCharges " id="877">90</td>


    </tr></tbody></table><div class="row"><div class="col-sm-6"><div class="dataTables_info" id="sample-table-3_info">Showing 1 to 3 of 3 entries</div></div><div class="col-sm-6"><div class="dataTables_paginate paging_bootstrap"><ul class="pagination"><li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li><li class="active"><a href="#">1</a></li><li class="next disabled"><a href="#"><i class="icon-double-angle-right"></i></a></li></ul></div></div></div></div>

</div>

</div>





<div style=" height:80%; overflow:auto;" class="col-lg-4">
<div class="table-header">
Selected Tests
</div>

<div id="selectedTestsContainer" style="height:170px;padding-right: 0px !important;
padding-left: 0px !important;" class="col-lg-12">

<table class="table table-striped table-bordered table-hover" id="selectedTestsTable">
    <thead>
        <tr>

        <th>
            Test Name
        </th>
    </tr>
    </thead>

    <tbody>






    </tbody>
</table>
</div>

</div>






</div>





</div>
    <div id="hiddenContainer">

    <input type="hidden" name="DependentId" class="iHiddenDependent" value="1" id="1"></div>
</form>












     </div>

我通过在jquery中使用长度来获取特定类的隐藏字段数但是它给我错误的数字我通过在第3页上显示的文本框附加文本框但是当我按类获得长度它返回错误的数字时，我我被困了。谢谢大家。

Answer 1

Mabye你忘了删除输入标签：

<input id="1031" type="text" value="1031" class="iHiddenCheck" name="Tests[0].TestId">

您可以添加

$("form#ImgUpload").find('input.iHiddenCheck#' + this.id).remove();

之后

$("#selectedTestsTable").find('tr#' + this.id).remove()
$("form#ImgUpload").find('input.iHiddenTestId#' + this.id).remove();
$("form#ImgUpload").find('input.iHiddenCharges#' + this.id).remove();
$("form#ImgUpload").find('input.iHiddenTestName#' + this.id).remove();

Jquery计数元素按类返回错误的数字

1 个答案: