[Javascript] jQuery複選框選中狀態更改事件



Answers

為了將來有任何人遇到困難,如果您要動態添加複選框,上面的正確答案將不起作用。 您需要充分利用事件委託 ,它允許父節點從特定的後代捕獲冒泡事件並發出回調。

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

請注意,幾乎總是沒有必要為父選擇器使用document 。 相反,選擇一個更具體的父節點來防止事件向上傳播太多。

以下示例顯示動態添加的dom節點的事件如何不觸發先前定義的偵聽器。

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

雖然此示例顯示事件委派的用法以捕獲特定節點(本例中為h1 )的事件,並為此類事件發出回調。

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

Question

當複選框被選中/取消選中時,我想要一個事件觸發客戶端:

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

基本上我希望它發生在頁面上的每個複選框。 這種點擊並檢查狀態的方法是否正確?

我在想,必須有更清晰的jQuery方式。 任何人都知道解決方案




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



如果你的意圖是只在選中的複選框上附加事件(所以它會在未選中時再觸發並在以後再次檢查),那麼這就是你想要的。

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

    })
})

如果您的意圖是將事件附加到所有復選框(已選中或未選中)

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

    })
})

如果你希望它只在被檢查時觸發(從未選中),那麼@James Allardice在上面回答。

BTW input[type='checkbox']:checked是CSS選擇器。






Links