perubahan kotak centang jQuery dan klik acara

$(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"/>

Di sini .change()memperbarui nilai kotak teks dengan status kotak centang. Saya gunakan .click()untuk mengonfirmasi tindakan di hapus centang. Jika pengguna memilih membatalkan, tanda centang dikembalikan tetapi .change()menyala sebelum konfirmasi.

Ini meninggalkan hal-hal dalam keadaan tidak konsisten dan kotak teks mengatakan false ketika kotak centang dicentang.

Bagaimana saya bisa berurusan dengan pembatalan dan menjaga nilai kotak teks konsisten dengan kondisi cek?

Diuji dalam JSFiddle dan lakukan apa yang Anda minta. Pendekatan ini memiliki manfaat tambahan ketika label yang terkait dengan kotak centang diklik.

Jawaban yang Diperbarui:

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

Jawaban asli:

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

Demo

Menggunakan mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Sebagian besar jawaban tidak akan menangkapnya (mungkin) jika Anda gunakan <label for="cbId">cb name</label>. Ini berarti ketika Anda mengklik label itu akan menandai kotak daripada mengklik langsung pada kotak centang. (Tidak persis pertanyaan, tetapi berbagai hasil pencarian cenderung datang ke sini)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

Dalam hal ini Anda dapat menggunakan:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Contoh JSFiddle dengan jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Contoh JSFiddle dengan jQuery 2.x terbaru

• Menambahkan contoh jsfiddle dan html dengan label kotak centang yang dapat diklik

Yah .. hanya demi menyelamatkan sakit kepala (sudah lewat tengah malam di sini), saya bisa datang dengan:

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

Semoga ini bisa membantu

Bagi saya ini sangat bagus:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

Ini dia

Html

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

Singkirkan acara perubahan, dan alih-alih ubah nilai kotak teks di acara klik. Daripada mengembalikan hasil konfirmasi, tangkap dalam var. Jika benar, ubah nilainya. Lalu kembalikan var.

Klik kotak centang dan memeriksa nilai dalam loop peristiwa yang sama adalah masalahnya.

Coba ini:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Demo: http://jsfiddle.net/mrchief/JsUWv/6/

jika Anda menggunakan iCheck Jquery gunakan kode di bawah ini

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

Coba ini

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

$(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')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

// this works on all browsers.

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

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

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


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

Jawaban terlambat, tetapi Anda juga dapat menggunakan on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>

cukup gunakan klik event id kotak centang saya adalah CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

dapatkan nilai radio berdasarkan nama

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

Saya tidak yakin mengapa semua orang membuat ini sangat rumit. Ini semua yang saya lakukan.

if(!$(this).is(":checked")){ console.log("on"); }

 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })