jQuery kiểm tra trạng thái thay đổi trạng thái

Tôi muốn một sự kiện kích hoạt phía máy khách khi hộp kiểm được chọn / bỏ chọn:

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

Về cơ bản tôi muốn nó xảy ra cho mọi hộp kiểm trên trang. Phương pháp bắn này khi nhấp và kiểm tra trạng thái có ổn không?

Tôi nghĩ rằng phải có một cách jQuery sạch hơn. Bất cứ ai cũng biết một giải pháp?

Ràng buộc với changesự kiện thay vì click. Tuy nhiên, có thể bạn vẫn sẽ cần kiểm tra xem hộp kiểm có được chọn hay không:

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

Lợi ích chính của việc ràng buộc với changesự kiện trong clicksự kiện là không phải tất cả các lần nhấp vào hộp kiểm sẽ khiến nó thay đổi trạng thái. Nếu bạn chỉ muốn chụp các sự kiện khiến hộp kiểm thay đổi trạng thái, bạn muốn changesự kiện được đặt tên thích hợp. Nhận xét lại

Cũng lưu ý rằng tôi đã sử dụng this.checkedthay vì gói phần tử trong một đối tượng jQuery và sử dụng các phương thức jQuery, đơn giản vì nó ngắn hơn và nhanh hơn để truy cập trực tiếp vào thuộc tính của phần tử DOM.

Chỉnh sửa (xem bình luận)

Để có được tất cả các hộp kiểm, bạn có một vài lựa chọn. Bạn có thể sử dụng :checkboxbộ chọn giả:

$(":checkbox")

Hoặc bạn có thể sử dụng một thuộc tính bằng bộ chọn:

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

Để tham khảo trong tương lai cho bất kỳ ai ở đây gặp khó khăn, nếu bạn tự động thêm các hộp kiểm, câu trả lời được chấp nhận chính xác ở trên sẽ không hoạt động. Bạn sẽ cần phải tận dụng ủy quyền sự kiện cho phép nút cha mẹ nắm bắt các sự kiện bị bong bóng từ một hậu duệ cụ thể và đưa ra một cuộc gọi lại.

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

Lưu ý rằng hầu như không cần thiết phải sử dụng documentcho bộ chọn cha. Thay vào đó, chọn một nút cha cụ thể hơn để ngăn việc truyền sự kiện lên quá nhiều cấp độ.

Ví dụ dưới đây hiển thị cách các sự kiện của các nút dom được thêm động không kích hoạt các trình nghe được xác định trước đó.

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

Trong khi ví dụ này hiển thị việc sử dụng phân quyền sự kiện để ghi lại các sự kiện cho một nút cụ thể (h1 trong trường hợp này) và đưa ra một cuộc gọi lại cho các sự kiện đó.

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

Chỉ là một giải pháp khác

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

Nếu ý định của bạn là chỉ đính kèm sự kiện trên các hộp kiểm đã chọn (vì vậy nó sẽ kích hoạt khi chúng không được chọn và được kiểm tra lại sau đó) thì đây là điều bạn muốn.

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

    })
})

nếu ý định của bạn là đính kèm sự kiện vào tất cả các hộp kiểm (được chọn và không được chọn)

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

    })
})

nếu bạn muốn nó chỉ bắn khi chúng đang được kiểm tra (từ không được kiểm tra) thì @James Allardice trả lời ở trên.

BTW input[type='checkbox']:checkedlà bộ chọn CSS.

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

Hành động dựa trên một sự kiện (trên sự kiện nhấp chuột).

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

Không có sự kiện thực hiện hành động dựa trên trạng thái hiện tại.

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

có lẽ đây có thể là một sự thay thế cho bạn

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

Đây là giải pháp cần tìm là hộp kiểm tra có được kiểm tra hay không. Sử dụng hàm #prop () //

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

Hãy thử xác thực jQuery này

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

Rất đơn giản, đây là cách tôi sử dụng:

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

Trân trọng!