Ändern Sie das Kontrollkästchen jQuery und klicken Sie auf Ereignis

564

$(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 wird .change()der Textfeldwert mit dem Kontrollkästchenstatus aktualisiert. Ich .click()bestätige die Aktion beim Deaktivieren. Wenn der Benutzer Abbrechen wählt, wird das Häkchen wiederhergestellt, aber .change()vor der Bestätigung ausgelöst .

Dadurch bleiben die Dinge in einem inkonsistenten Zustand und das Textfeld sagt false, wenn das Kontrollkästchen aktiviert ist.

Wie kann ich mit der Stornierung umgehen und den Textfeldwert mit dem Prüfstatus in Einklang bringen?

Professor Chaos
quelle
1
Es funktioniert in FF und Chrome und hat das erklärte Verhalten in IE 8. Daher kann es wichtig sein, zu notieren, in welchen Browsern dies benötigt wird und in welchen der Fehler angezeigt wird.
Kasdega
Es ist nicht das Beste, aber ich glaube, es funktioniert hier für mich: http://jsfiddle.net/Skooljester/2Xxcn/ .
Ayyp

Antworten:

904

Getestet in JSFiddle und macht das, wonach Sie fragen. Dieser Ansatz hat den zusätzlichen Vorteil, dass er ausgelöst wird, wenn auf ein mit einem Kontrollkästchen verknüpftes Etikett geklickt 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'));        
    });
});
Kasdega
quelle
128
Nur eine Anmerkung, es ist viel schneller zu verwenden this.checkedals $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
Dakota
37
@ Dakota Zugegeben, es ist viel langsamer, aber wir sprechen immer noch von 600.000 Operationen / Sek. Also 600 mal pro Millisekunde. Ich denke, wenn dies zu Leistungsproblemen auf Ihrer Webseite führt, müssen Sie möglicherweise Ihr Javascript neu bewerten;) Es ist jedoch gut, Leistungsmetriken mit Code zu verstehen. Vielen Dank.
Mike U
51
@MikeU: Stimmen Sie mit Ihnen über die vorzeitige Optimierung überein, aber wenn man bedenkt, dass this.checkeddas Schreiben von + nativem Javascript viel kürzer ist, kann es sich im Allgemeinen wirklich lohnen, es zu verwenden (abgesehen davon, dass es etwa 200- bis 300-mal schneller ist).
Levite
11
Ich würde .prop () anstelle von .attr () empfehlen, da letzteres nicht in allen Fällen funktioniert und ich glaube, dass jQuery jetzt .prop () empfiehlt.
Kabadisha
2
Ich denke, dass [dies] in $ ('# textbox1'). Val (this.checked); bezieht sich auf Dokument. Es sollte $ ('# textbox1') sein. Val ($ ('# checkbox1'). Is (': check'));
Yurin
90

Demo

Verwenden mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});
Joseph Marikle
quelle
Es zeigt die Warnung an, wenn es überprüft wird, und es hindert mich immer daran, tatsächlich zu überprüfen. Dies ist auf Chrome.
Pimvdb
das gleiche wie @pimvdm. Die Bestätigung wird auch bei Überprüfungsaktionen angezeigt (sie sollte nur zum Deaktivieren angezeigt werden). Wenn Sie OK auswählen, wird das Kontrollkästchen nicht aktiviert.
Professor Chaos
1
Es funktioniert, wenn Sie die Maus verwenden, aber nicht, wenn Sie es mit der Tastatur überprüfen.
Frinux
3
@frinux Das ist ganz einfach, weil es sich um eine mausbezogene Frage handelt. Bitte stimmen Sie Antworten nicht aufgrund ihrer Relevanz für völlig getrennte Themen ab. Wenn Sie ein Problem haben, den Status eines Indikators nach einem Kontrollkästchen über die Tastatur auszulösen, stellen Sie bitte eine Frage dazu, anstatt die Antworten nachlässig herunterzustimmen.
Joseph Marikle
3
Downvoted, da Mousedown nicht die einzige Möglichkeit ist, mit dem Kontrollkästchen zu interagieren.
Jonathan
51

Die meisten Antworten werden es (vermutlich) nicht fangen, wenn Sie es verwenden <label for="cbId">cb name</label>. Das heißt, wenn Sie auf das Etikett 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 welchem ​​Fall könnten Sie 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.

  • Jsfiddle-Beispiele und HTML mit dem anklickbaren Kontrollkästchen hinzugefügt
lko
quelle
1
Es ist #OuterDivOrBody nicht .OuterDivOrBody :)
Laurent Brieu
24

Nun ... nur um Kopfschmerzen zu vermeiden (es ist nach 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

Zarun
quelle
11

Für mich funktioniert das super:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})
chris
quelle
4
Kam über eine Websuche darüber hinweg. Sie sollten 'prop' anstelle von 'attr' verwenden >> api.jquery.com/prop
Dr. Schizo
11

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>
Entwickler
quelle
6

Entfernen 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 Variable ab. Wenn es wahr ist, ändern Sie den Wert. Dann geben Sie die var zurück.

yoozer8
quelle
6

Das Problem besteht darin, auf das Kontrollkästchen zu klicken und in derselben Ereignisschleife nach dem Wert zu 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/

Mrchief
quelle
6

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

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

Versuche dies

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

Späte Antwort, aber Sie können auch verwenden 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>

CONvid19
quelle
1

Verwenden Sie einfach das Klickereignis. Meine Kontrollkästchen-ID lautet CheckAll

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

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

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

Funkwert nach Namen abrufen

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

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"); }
CharlotteOswald
quelle
-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })
Hari Lakkakula
quelle
3
Nur-Code-Antworten gelten als minderwertig: Stellen Sie sicher, dass Sie erklären, was Ihr Code tut und wie er das Problem löst. Es wird sowohl dem Fragesteller als auch zukünftigen Lesern helfen, wenn Sie Ihrem Beitrag weitere Informationen hinzufügen können. Siehe auch Erklären vollständig codebasierter
borchvm