如何在点击jQuery之前检查单选按钮的值

Question

我在页面上有两个复选框，默认情况下会选中一个复选框。我想在单击任一复选框时使用jQuery触发自定义事件。但是，问题是我想在点击事件之前获取选中的值，但我一直将checked作为true。

我的HTML看起来像这样：

<div class="clearfix controls">
    <label class="radio inline" for="yes">
        <input type="radio" name="recycle" value="1" id="yes" data-price-increase="29">
        Yes
    </label>
    <label class="radio inline" for="no">
        <input type="radio" name="recycle" value="0" id="no" checked="checked" data-price-decrease="29">
        No
    </label>
</div>

我的JavaScript看起来像这样：

$('[data-price-increase]').on('click', function(e) {
    $('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});
$('[data-price-decrease]').on('click', function(e) {
    $('body').trigger('price.decrease', [ $(this).data('price-decrease') ]);
});

但如果我不断点击一个单选按钮，即使已经选中了单击处理程序，点击处理程序也会被多次触发。

单选按钮分别添加或删除额外费用，因此不断点击“是”单选按钮会不断地将费用添加到价格中，这是不希望的。如果已经选中“是”，那么我不希望再次添加值。

Answer 1

我认为你在寻找变革事件：

$('[data-price-increase]').on('change', function(e) {
    console.log('changed');
    $('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});
$('[data-price-decrease]').on('change', function(e) {
    console.log('changed');
    $('body').trigger('price.decrease', [ $(this).data('price-decrease') ]);
});

因此，仅在检查更改时触发操作，而不是每次点击都会触发。

Answer 2

询问目标是否已选中

$('[data-price-increase]').on('click', function(e) {
   if(!jQuery(event.target).is(":checked"))
       $('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});