0

ページに 2 つのチェック ボックスがあり、そのうちの 1 つが既定でオンになっています。いずれかのチェック ボックスがクリックされたときに、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') ]);
});

しかし、ラジオ ボタンが既にチェックされている場合でも、ラジオ ボタンを継続的にクリックすると、クリック ハンドラーが複数回起動されます。

ラジオ ボタンはそれぞれ追加料金を追加または削除するため、[はい] ラジオ ボタンをクリックし続けると、価格に料金が追加され続けますが、これは望ましくありません。「はい」がすでにチェックされている場合は、再度付加価値を付けたくありません。

4

2 に答える 2

3

変更イベントを探していると思います：

$('[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') ]);
});

したがって、クリックごとではなく、チェックが変更された場合にのみアクションがトリガーされます。

于 2013-02-13T10:59:19.263 に答える
-2

チェックされているかターゲットに尋ねる

$('[data-price-increase]').on('click', function(e) {
   if(!jQuery(event.target).is(":checked"))
       $('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});
于 2013-02-13T11:01:25.913 に答える