wake-up-neo.com

Aktivieren Sie das Kontrollkästchen jQuery und klicken Sie auf event

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

Hier aktualisiert .change() den Textfeldwert mit dem Kontrollkästchenstatus. Ich benutze .click(), um die Aktion beim Deaktivieren zu bestätigen. Wenn der Benutzer Abbrechen wählt, wird das Häkchen wiederhergestellt, aber .change() wird vor der Bestätigung ausgelöst.

Dies lässt die Dinge in einem inkonsistenten Zustand und das Textfeld sagt false, wenn das Kontrollkästchen aktiviert ist.

Wie gehe ich mit dem Abbruch um und halte den Textfeldwert mit dem Überprüfungsstatus konsistent?

515
Professor Chaos

Getestet in JSFiddle und erfüllt alle Ihre Anforderungen. Dieser Ansatz hat den zusätzlichen Vorteil, dass er ausgelöst wird, wenn eine mit einem Kontrollkästchen verknüpfte Beschriftung angeklickt wird.

Aktualisierte Antwort:

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

Ursprüngliche Antwort:

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

Demo

Benutze mousedown

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

Die meisten Antworten werden (vermutlich) nicht verstanden, wenn Sie <label for="cbId">cb name</label> verwenden. Das bedeutet, wenn Sie auf die Beschriftung klicken, wird das Kontrollkästchen aktiviert, anstatt direkt auf das Kontrollkästchen zu klicken. (Nicht genau die Frage, aber verschiedene Suchergebnisse kommen hierher)

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

In diesem Fall können Sie Folgendes verwenden:

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

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

JSFiddle-Beispiel mit der neuesten jQuery 2.x

  • Es wurden jsfiddle-Beispiele und der HTML-Code mit der anklickbaren Checkbox-Bezeichnung hinzugefügt
46
lko

Nun ... nur um Kopfschmerzen zu vermeiden (es ist Mitternacht hier), könnte ich mir Folgendes einfallen lassen:

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

Ich hoffe es hilft

24
zarun

Für mich funktioniert das super:

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

Hier sind Sie ja

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

Beseitigen Sie das Änderungsereignis, und ändern Sie stattdessen den Wert des Textfelds im Klickereignis. Anstatt das Ergebnis der Bestätigung zurückzugeben, fangen Sie es in einer var. Wenn dies zutrifft, ändern Sie den Wert. Dann senden Sie die var.

6
yoozer8

Das Problem besteht darin, dass Sie auf das Kontrollkästchen klicken und in derselben Ereignisschleife nach dem Wert suchen.

Versuche dies:

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

6
Mrchief

wenn Sie die iCheck-Abfrage verwenden, verwenden Sie den folgenden Code

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

Versuche dies

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });
5
ShankarSangoli
$(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'));
            }
        }
    });
});
5
Jason
$('#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>
4
user3636759
// 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;
    });
});
4
Marcelo De Zen

Ich bin mir nicht sicher, warum jeder das so kompliziert macht. Das ist alles was ich getan habe.

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

verwenden Sie einfach nur das Klick-Ereignis Meine Kontrollkästchen-ID ist CheckAll

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

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

             alert(";)");
      }
    }
1
Geeti

holen Sie sich den Funkwert mit Name

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

Späte Antwort, aber Sie können auch on.("change") verwenden

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