jQuery checkbox zaznaczony Stan zmieniony Zdarzenie

W przyszłości dla każdego, kto ma trudności, jeśli dodajesz pola dynamiczne, poprawna odpowiedź powyżej nie będzie działać. Musisz wykorzystać delegację zdarzeń , która pozwala węzłowi nadrzędnemu przechwytywać pęcherzykowe zdarzenia z określonego potomka i wysyłać wywołanie zwrotne.

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

Zauważ, że prawie zawsze nie ma potrzeby używania document dla selektora nadrzędnego. Zamiast tego wybierz bardziej konkretny węzeł nadrzędny, aby zapobiec rozprzestrzenianiu się zdarzenia zbyt wiele poziomy.

Poniższy przykład pokazuje, jak zdarzenia dynamicznie dodawanych węzłów dom nie wywołują wcześniej zdefiniowanych detektorów.

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

Podczas gdy ten przykład wyświetla użycie delegowania zdarzeń do przechwytywania zdarzeń dla określonego węzła (h1 w tym przypadku) i wywołuje wywołanie zwrotne dla takich zdarzeń.

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

Just another solution

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

Jeśli twoim zamiarem jest dołączanie zdarzenia Tylko do zaznaczonych checkboxów (więc odpali się, gdy nie zostaną zaznaczone i ponownie zaznaczone), to jest to, czego chcesz.

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

    })
})

Jeśli twoim zamiarem jest dołączenie zdarzenia do wszystkich checkboxów (zaznaczonych i niezaznaczonych)

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

    })
})

Jeśli chcesz, aby odpalił tylko wtedy, gdy są sprawdzane (z niezaznaczonego), to @ James Allardice odpowiedz powyżej.

BTW input[type='checkbox']:checked to selektor CSS.

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

Być może to może być alternatywa dla Ciebie.

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

Podejmowanie działań w oparciu o Zdarzenie (Zdarzenie kliknięcia).

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

Bez podejmowania działań w oparciu o aktualny stan.

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

Try this jQuery validation

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