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

时间:2014-11-20 03:23:42

标签: javascript jquery

我已经有一段时间了。我正在尝试使用jQuery创建一个动态计算表单。

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

所以我一直在努力解决问题。我创建了一个.on('click', function() {});来抓取兄弟元素,它将是输入标记及其值。这有效。的种类。在取消选中复选框之前,该值不会显示在#total-field中。我的想法是因为点击功能在我抓住var giantSub = $('#giant-sub-label');的同时触发,所以if(giantSub.hasClass('checked');没有看到班级检查,直到我取消选中该框,这反过来我的之后#total-field中的值。这是对的吗?

如果是这样,有没有办法检查在复选框被存储到变量之前单击复选框后检查的类?所以变量有.checked我正在寻找传递我的if条件,然后在#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>

1 个答案:

答案 0 :(得分:1)

您获得的行为是因为Synthetic Click Activation标签与某个控件相关联时(在这种情况下为复选框),单击标签将触发click事件,并且由于存在关联的控件,因此用户代理将在复选框上运行合成点击激活。登记/> 因此,您在标签点击处理程序中获得了复选框的预先单击状态 但是,您可以通过将处理程序附加到复选框而不是标签来获得单击后复选框状态。修改复选框状态后,这些事件将通过标签点击间接触发(即使隐藏了您的复选框)。

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