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

How to dynamically add values linked to a checkbox or in the input tag using jQuery

本文关键字：输入 复选框 jQuery 何使用 动态 添加 链接      更新时间：2023-09-26

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

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

所以我一直在研究一个解决方法。我创建了一个.on('click', function() {});，用于获取同级元素，该元素将成为输入标签及其值。这行得通。有点。该值在取消单击复选框之前不会显示在 #total 字段中。我的想法是因为点击功能与我抓取var giantSub = $('#giant-sub-label');同时触发，因此if(giantSub.hasClass('checked');看不到选中的类，直到我取消选中该框，这反过来又将我的值放在#total-field之后。这是对的吗？

如果是这样，有没有办法在单击复选框后检查在将其存储在变量中之前选中的类？因此，变量具有我正在寻找传递我的 if 条件.checked，然后将#total字段中的值添加？或者有更简单的方法可以做到这一点吗？

这是我的匿名函数：

$(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>

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

 $(checkBoxSelector).on('click or change', function () {...do something
相关文章：