一貫性のない動作を発生させずに jQuery でチェックボックスの変更とクリック イベントを処理する方法は?

jQuery チェックボックスの変更およびクリック イベントの難問

jQuery の変更およびクリック イベントは、チェックボックスを操作するときに予期しない動作を引き起こすことがあります。特に、確認ポップアップの前に変更イベントが発生すると、チェックボックスの状態と関連するテキスト フィールドの間に不一致が生じる可能性があります。

問題

次のコードを考えてみましょう:

$(document).ready(function() {
  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

このシナリオでは、変更イベントはチェックボックスの状態に基づいてテキスト フィールドの値を更新します。ただし、チェックボックスがオフの場合、クリック イベントでは確認のポップアップが表示されます。ユーザーがアクションをキャンセルした場合、チェックボックスはオンのままですが、変更イベントはすでに発生しています。これにより、テキスト フィールドに不正な値が残ります。

解決策

この問題に対処するには、コードを変更して、変更イベント。 1 つのアプローチは、prop() メソッドを使用して、チェックされた状態をプログラムで管理することです。

$(document).ready(function() {
  $('#textbox1').val(this.checked);

  $('#checkbox1').change(function() {
    if(this.checked) {
        var returnVal = confirm("Are you sure?");
        $(this).prop("checked", returnVal);
    }
    $('#textbox1').val(this.checked);        
  });
});

この更新されたコードでは、チェックボックスがチェックされたときに、変更イベントによって確認ポップアップがトリガーされます。ユーザーがアクションをキャンセルすると、prop() メソッドはチェックボックスの状態を復元し、変更イベントによってテキスト フィールドが誤った値で更新されるのを防ぎます。

以上が一貫性のない動作を発生させずに jQuery でチェックボックスの変更とクリック イベントを処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。