Question

我有一个带有一些jQuery复选框的表。在单击每个复选框时，会触发一种方法，使用以下内容更新底行中的总计：onclick="UpdateTotalFee()"

当页面最初加载时，一切都按预期完美运行。每个复选框单击都会触发UpdateTotalFee()方法。

问题出现的地方是用户点击全选链接后。这样可以正确选择所有复选框，但是，对复选框的后续单击不再触发更新总计的方法。

当我在萤火虫中检查时，我看到的一个区别是，当页面首次加载时，点击复选框似乎点击了span.checkboxplaceholder，但点击了全部选择链接后，点击后续点击复选框似乎没有调用相同的东西。

我希望我已经很好地解释了这个情况。以下是该表的完整代码：

<table border="1">
<tr>
    <th></th>
    <th style="vertical-align:middle;">Number</th>
    <th style="text-align:left; vertical-align:middle;">Owner</th>
    <th style="text-align:left; vertical-align:middle;">Address</th>
    <th style="vertical-align:middle;">Code</th>
    <th style="vertical-align:middle;">Class</th>
    <th style="vertical-align:middle;">Filing Fee</th>
    <th style="text-align:center; width:75px;">Review ?<br />
    <a href="" onclick="select_all_com(); return false"><strong>All</strong></a>
     &nbsp;&nbsp;or&nbsp;&nbsp;
    <a href="" onclick="select_none_com(); return false"><strong>None</strong></a>
    </th>
</tr>

<?php foreach ($property['commercial'] as $key => $value): ?>
    <tr>
        <th><?php echo str_pad($row++, 2, '0', STR_PAD_LEFT); ?></th>
        <td><a href= "<?php echo site_url() . "propertydetail/viewpropertydetail/" . $value['property#']; ?>"><?php echo RollNumber($value['property#']); ?></a></td>
        <td style="text-align:left"><?php echo $value['Property Owner']; ?> </td>
        <td style="text-align:left"><?php echo $value['Property Address']; ?></td>
        <td style="text-align:middle" ><?php echo number_format($value['PC'],0); ?></td>
        <td><?php echo $value['Class']; ?></td>
        <td><?php echo money_format('$%.0i', 140); ?></td>
        <td id="com" style="padding-left:25px;" onclick="UpdateTotalFee()">
<input type="checkbox" name="file_com_appeal" class="com-checkbox" value="<?php echo $value['property#'] ?>"></td>
    </tr>
<?php endforeach; ?>
    <th colspan="6" style="text-align:right; padding:1% 1% 1% 0%;">       
    <h4>TOTAL</h4><h5><span id="AppealSelected"></span></h5></th>
    <th ><h4><span id="AppealFeeTotal"></span></h4></th>
    <th></th>

这是每次单击复选框时应调用的javascript函数：

function UpdateTotalFee(){
        var AppealCount = 0;
        $('input[name=file_com_appeal]').each(function(){
            if($(this).attr('checked')){
               AppealCount++;
            }
        });
        $('#AppealSelected').text(                                      
        (AppealCount == 0 ? '' : '(' + AppealCount + ' of ' + <?php echo count($property['commercial']);?> + (AppealCount == 1 ? ' property selected)' : ' properties selected)')));    
        $('#AppealFeeTotal').text("$"+(AppealCount*140));
    }

Answer 1

如果（未）选中，

复选框会触发“onchange”事件。所以请在您的javascript代码中监听此事件。然后检查是否在事件处理程序中选中了复选框以将更改应用于总金额。样品：

[HTML]
<input type="checkbox" name="check" id="check" value="1" onchange="updateAmount();"/>

[JS]
function updateAmount(){
     if($('input#check').is(':checked')){
           // checked
     }else{
          // unchecked
     }
}

Answer 2

请创建一个新功能并调用该功能单击选择全部并将总行数作为此功能的参数传递，以便您可以轻松计算总金额。

赞totalamount= count*140 并使用以下代码

设置此值

$('#AppealFeeTotal').text("$"+(totalamount));

选择全部方法后，jQuery复选框不会触发事件

2 个答案: