wake-up-neo.com

das jQuery-Kontrollkästchen hat den Status geändert

Ich möchte, dass ein Ereignis auf der Clientseite ausgelöst wird, wenn ein Kontrollkästchen aktiviert/deaktiviert ist:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Grundsätzlich möchte ich, dass dies für jedes Kontrollkästchen auf der Seite geschieht. Ist diese Methode des Klickens und Überprüfen des Status in Ordnung?

Ich denke, es muss einen saubereren Weg für jQuery geben. Kennt jemand eine Lösung?

541
AnonyMouse

Binden Sie an das Ereignis change anstelle von click. Sie müssen jedoch wahrscheinlich noch prüfen, ob das Kontrollkästchen aktiviert ist oder nicht:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Der Hauptvorteil der Bindung an das change-Ereignis gegenüber dem click-Ereignis besteht darin, dass nicht alle Klicks auf ein Kontrollkästchen den Status ändern. Wenn Sie nur Ereignisse erfassen möchten, bei denen das Kontrollkästchen den Status ändert, möchten Sie das Ereignis change mit dem richtigen Namen. In Kommentaren redigiert

Beachten Sie auch, dass ich this.checked verwendet habe, anstatt das Element in ein jQuery-Objekt einzuwickeln und jQuery-Methoden zu verwenden. Dies liegt einfach daran, dass der Zugriff auf die Eigenschaft des DOM-Elements kürzer und schneller ist.

Bearbeiten (siehe Kommentare)

Um alle Kontrollkästchen zu erhalten, haben Sie mehrere Möglichkeiten. Sie können den Pseudo-Selector :checkbox verwenden:

$(":checkbox")

Oder Sie können einen Attribut gleich Selektor verwenden:

$("input[type='checkbox']")
1083
James Allardice

Wenn Sie die Kontrollkästchen dynamisch hinzufügen möchten, funktioniert die richtige Antwort oben nicht für alle, die Schwierigkeiten haben. Sie müssen event delegation einsetzen, um einem übergeordneten Knoten die Möglichkeit zu geben, durchgebrannte Ereignisse von einem bestimmten Nachkommen zu erfassen und einen Rückruf auszulösen.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Beachten Sie, dass es fast immer unnötig ist, document für den übergeordneten Selektor zu verwenden. Wählen Sie stattdessen einen spezifischeren übergeordneten Knoten aus, um zu verhindern, dass das Ereignis zu viele Stufen erreicht.

Das folgende Beispiel zeigt, wie die Ereignisse dynamisch hinzugefügter Dom-Knoten keine zuvor definierten Listener auslösen.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

In diesem Beispiel wird die Verwendung der Ereignisdelegation zum Erfassen von Ereignissen für einen bestimmten Knoten (in diesem Fall h1) angezeigt und ein Rückruf für solche Ereignisse ausgegeben.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

91
applecrusher

Nur eine andere Lösung 

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})
21

Wenn Sie beabsichtigen, ein Ereignis nur an markierte Kontrollkästchen anzuhängen (damit es ausgelöst wird, wenn es deaktiviert ist und später erneut aktiviert wird), ist dies genau das, was Sie möchten.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

wenn Sie beabsichtigen, ein Ereignis an alle Kontrollkästchen anzuhängen (aktiviert und deaktiviert)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

wenn Sie möchten, dass es nur ausgelöst wird, wenn sie geprüft werden (von unmarkiert), dann antworten Sie auf @James Allardice. 

BTW input[type='checkbox']:checked ist der CSS-Selektor.

12
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});
4
Burhan Kaya

Versuchen Sie diese jQuery-Überprüfung

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

1
Nishanth ॐ

vielleicht ist dies eine Alternative für Sie.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
1
caras

Aktion basierend auf einem Ereignis (bei Klickereignis).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Ohne dass ein Ereignis auf der Grundlage des aktuellen Status ausgeführt wird.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}
0
Hasib Kamal

Dies ist die Lösung, die Sie finden können, wenn das Kontrollkästchen aktiviert ist oder nicht . Verwenden Sie die # prop () - Funktion //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });
0
Shan