jQuery复选框在全选方法后不触发事件答案

【问题标题】：jQuery checkbox does not trigger event after Select All methodjQuery复选框在全选方法后不触发事件
【发布时间】：2012-12-24 03:16:45
【问题描述】：

我有一个带有一些 jQuery 复选框的表格。当每个复选框被点击时，这会触发一个方法来更新底部行中的总数：onclick="UpdateTotalFee()"

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

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

当我在 firebug 中检查时，我可以看到的一个区别是，当页面首次加载时，单击复选框似乎是单击 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));
    }

【问题讨论】：

标签： javascript php jquery checkbox jquery-events

【解决方案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
     }
}

【讨论】：

【解决方案2】：

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

喜欢totalamount= count*140 并使用以下代码设置此值

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

【讨论】：