jQuery Checkbox aktiviert Status geändert Ereignis

Ich möchte, dass ein Ereignis clientseitig 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 zum Auslösen des Klicks und Überprüfen des Status in Ordnung?

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

Binden Sie an das changeEreignis statt 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 changeEreignis gegenüber dem clickEreignis besteht darin, dass nicht alle Klicks auf ein Kontrollkästchen dazu führen, dass es den Status ändert. Wenn Sie nur Ereignisse erfassen möchten, bei denen das Kontrollkästchen den Status ändert, möchten Sie das changeEreignis mit dem passenden Namen . In Kommentaren redigiert

Beachten Sie auch, dass ich this.checkeddas Element verwendet habe, anstatt es in ein jQuery-Objekt zu verpacken und jQuery-Methoden zu verwenden, einfach weil es kürzer und schneller ist, direkt auf die Eigenschaft des DOM-Elements zuzugreifen.

Bearbeiten (siehe Kommentare)

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

$(":checkbox")

Oder Sie könnten ein Attribut verwenden, das gleich Selektor ist:

$("input[type='checkbox']")

Wenn Sie die Kontrollkästchen dynamisch hinzufügen, funktioniert die oben akzeptierte Antwort nicht. Sie müssen die Ereignisdelegierung nutzen, die es einem übergeordneten Knoten ermöglicht, Ereignisse mit Blasen von einem bestimmten Nachkommen zu erfassen und einen Rückruf auszugeben.

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

Beachten Sie, dass die Verwendung documentfür den übergeordneten Selektor fast immer nicht erforderlich ist. Wählen Sie stattdessen einen spezifischeren übergeordneten Knoten, um zu verhindern, dass das Ereignis auf zu viele Ebenen übertragen wird.

Das folgende Beispiel zeigt, wie die Ereignisse dynamisch hinzugefügter Dom-Knoten zuvor definierte Listener nicht 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 Ereignisdelegierung zum Erfassen von Ereignissen für einen bestimmten Knoten ( h1in diesem Fall) und zum Ausgeben eines Rückrufs für solche Ereignisse angezeigt.

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

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

Wenn Sie beabsichtigen, ein Ereignis nur an aktivierte Kontrollkästchen anzuhängen (damit es ausgelöst wird, wenn sie deaktiviert und später erneut aktiviert werden), ist dies 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 aktiviert sind (nicht aktiviert), antworten Sie oben auf @James Allardice.

Übrigens input[type='checkbox']:checkedist CSS-Selektor.

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

Maßnahmen basierend auf einem Ereignis (bei Klickereignis).

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

Ohne dass ein Ereignis basierend auf dem aktuellen Status Maßnahmen ergreift.

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

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" />`

Dies ist die Lösung, um herauszufinden, ob das Kontrollkästchen aktiviert ist oder nicht. Verwenden Sie die Funktion #prop () //

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

Versuchen Sie diese jQuery-Validierung

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

Ist sehr einfach, so benutze ich:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Grüße!