javascript - 如何使用 jQuery 动态添加链接到复选框或输入标记中的值

Question

我从事这个工作已经有一段时间了。我正在尝试创建一个使用 jQuery 进行动态计算的表单。

我想查看prop('checked')对于输入标签中的复选框。我不认为这是一个问题，但对于我正在处理的表单，它们的复选框位于屏幕之外，因为它们正在交换事件和非事件图像。我应该仍然能够检查 prop('checked')即使复选框不在屏幕上，也可以在该输入标签中，对吗？如果是这样，则由于某种原因这不起作用。

所以我一直在努力解决这个问题。我创建了一个.on('click', function() {});它获取同级元素，该元素将是输入标记及其值。这有效。有点儿。在取消单击该复选框之前，该值不会显示在 #total-field 中。我的想法是因为当我捕获 var giantSub = $('#giant-sub-label'); 时，点击功能同时触发。所以if(giantSub.hasClass('checked');在我取消选中该框之前，看不到该类被选中，该框又将我的值放入 #total-field 中然后。这是正确的吗？

如果是这样，有没有办法在单击复选框后将其存储在变量中之前检查所检查的类？这样变量就有 .checked我正在寻找传递我的 if 条件，然后它将在 #total 中添加值 field ？或者有更简单的方法吗？

这是我的匿名函数:

$(function () {
    $('#giant-sub-label').on('click', function () {
        var giantSub = $('#giant-sub-label');
        var total = 0;
        if (giantSub.hasClass('checked')) {
            total += parseInt($(this).next().val());
        }
        $('#total-field').val('$' + total);
    });
});

HTML

<div class="checkbox-format">
  <label for="three-feet-field" id="giant-sub-label">3-feet</label>
  <input type="checkbox" name="GIANT_THREE_FEET" id="three-feet-field" class="order-options" value="42" />
</div>

Answer 1

您所得到的行为是因为 Synthetic Click Activation .
当标签与某些控件(在本例中为复选框)关联时，单击标签将触发单击事件，并且由于存在关联的控件，因此用户代理将在该复选框上运行合成单击激活。< br/> 因此，您将在标签单击处理程序中获得复选框的预单击状态。
但是，您可以通过将处理程序附加到复选框而不是标签来获取单击后复选框状态。修改复选框状态后，这些事件将通过标签单击间接触发(即使您的复选框处于隐藏状态)。

 $(checkBoxSelector).on('click or change', function () {...do something