☰

jQuery チェックボックスの変更とクリックイベント 質問する

tag-icon • tag-icon javascript jquery checkbox event-handling
jQuery チェックボックスの変更とクリックイベント 質問する 

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

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

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

ここでは、.change()チェックボックスのステータスでテキスト ボックスの値を更新します。.click()チェックを外すときにアクションを確認するために使用します。ユーザーがキャンセルを選択すると、チェックマークは復元されますが、.change()確認前に実行されます。

これにより、一貫性のない状態になり、チェックボックスがオンになっているときにテキストボックスに false と表示されます。

キャンセルを処理して、テキスト ボックスの値をチェック状態と一致させるにはどうすればよいですか?

ベストアンサー1

テスト済みJSFiddleそして、あなたが求めていることを実行します。このアプローチには、チェックボックスに関連付けられたラベルがクリックされたときに実行されるという追加の利点があります。

更新された回答:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

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

元の回答:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

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

おすすめ記事