jQuery onay kutusu değişikliği ve tıklama etkinliği

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

Burada .change()metin kutusu değerini onay kutusu durumuyla günceller. .click()İşaretini kaldırırken eylemi onaylamak için kullanıyorum . Kullanıcı iptal'i seçerse, onay işareti geri yüklenir, ancak .change()onaylamadan önce tetiklenir.

Bu, işleri tutarsız bir durumda bırakır ve onay kutusu işaretlendiğinde metin kutusu yanlış yazar.

İptal ile nasıl başa çıkabilirim ve metin kutusu değerini kontrol durumuyla tutarlı tutabilirim?

JSFiddle'da test edilmiştir ve istediğinizi yapar.Bu yaklaşım, bir onay kutusuyla ilişkilendirilmiş bir etiket tıklandığında tetikleme avantajı sağlar.

Güncellenmiş Yanıt:

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

Orijinal cevap:

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

gösteri

kullanım mousedown

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

Kullanırsanız cevapların çoğu (muhtemelen) yakalamayacaktır <label for="cbId">cb name</label>. Bu, etiketi tıkladığınızda, doğrudan onay kutusunu tıklamak yerine kutuyu işaretleyeceği anlamına gelir. (Tam olarak soru değil, ancak çeşitli arama sonuçları buraya gelme eğilimindedir)

<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>

Bu durumda şunları kullanabilirsiniz:

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

JQuery 1.6.4 ile JSFiddle örneği

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

En son jQuery 2.x ile JSFiddle örneği

• Tıklanabilir onay kutusu etiketli jsfiddle örnekleri ve html eklendi

Şey ... sadece bir baş ağrısını kurtarmak için (burada geçen gece yarısı), şu şekilde ortaya çıkabilirim:

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

Umarım yardımcı olur

Benim için bu harika çalışıyor:

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

Buyrun

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>

Change olayından kurtulun ve bunun yerine click olayındaki metin kutusunun değerini değiştirin. Onay sonucunu döndürmek yerine, bir var. Doğruysa, değeri değiştirin. Sonra var.

Onay kutusunu tıklatmak ve aynı olay döngüsünde değeri kontrol etmek sorun.

Bunu dene:

$('#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/

iCheck Jquery kullanıyorsanız aşağıdaki kodu kullanın

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

Bunu dene

$('#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>

Geç cevap, ancak aynı zamanda 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>

sadece tıklama olayını kullan onay kutusu kimliğim CheckAll

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

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

             alert(";)");
      }
    }

radyo değerini ada göre al

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

Herkesin bunu neden bu kadar karmaşık hale getirdiğinden emin değilim. Tüm yaptığım bu.

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

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

        }
        else {

        }

    })