Question

我在页面上有一个引用表单（使用Gravity Forms WP插件制作，但这没关系）。表单上有多个复选框 - 调用这些选项。每个选项都有一个不同的“分配”值。我想要做的是，如果勾选了特定的复选框，则将这些值加在一起，如果不是，则减去它的值。我希望这有道理......？

这是我到目前为止所做的：

jQuery(document).ready( function() {
    jQuery('#choice_2_10_4, #choice_2_10_5').change( function() {
        var option1 = Number( jQuery('#choice_2_10_4:checked').val() || 0 ); // Add 250 if checked
        var option2 = Number( jQuery('#choice_2_10_5:checked').val() || 0 ); // Add 200 if checked
        jQuery('#quote-price').val( option1 + option2 );
    });
});

#quote-price是我想要显示计算总数的字段。

我可以将#choice_2_10_4和#choice_2_10_5更改为：

jQuery('#choice_2_10_4:checked').val(250)
jQuery('#choice_2_10_5:checked').val(250)

或者沿着这些方向做什么？

由于

Answer 1

是的，您可以设置值，但之后您必须触发更改事件，如下所示：

jQuery('#choice_2_10_4:checked').val(250).trigger('change');
jQuery('#choice_2_10_5:checked').val(250).trigger('change');

$(function() {
    $('.choice').on('change', function() {
        var total = 0;
        $('.choice').each(function() {
            total += this.checked ? +this.value : -this.value;
        });
        $('#quote-price').val( total );
    })
    .change();
    $('.add').on('click', function() {
        var target = $(this).data('target'),
            theval = $(target).is(':checked') ? +$(this).data('value') : +$(target).val();
        $(target).val( theval ).trigger('change');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="choice_2_10_4" class="choice" value="200"> 200 
<button type="button" data-target="#choice_2_10_4" data-value="250" class="add">Add 250</button><br>
<input type="checkbox" id="choice_2_10_5" class="choice" value="400"> 400 
<button type="button" data-target="#choice_2_10_5" data-value="350" class="add">Add 350</button><br>
<input type="text" readonly="readonly" id="quote-price"/>

Answer 2

不是通过#choice_2_10_4:checked').val(250)为复选框指定值，而是可以将值放在首位的复选框中，例如<input type="checkbox" value="250" />

然后只需通过#choice_2_10_4:checked').val()

进行调用即可

当你致电#choice_2_10_4:checked').val(250)时，它会返回一个元素数组。

console.log()它可以自己查看

jQuery - 一起添加多个值复选框

2 个答案: