jQuery复选框选中状态更改事件

本文翻译自：jQuery checkbox checked state changed event

I want an event to fire client side when a checkbox is checked / unchecked: 当选中/取消选中复选框时，我希望事件触发客户端：

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

Basically I want it to happen for every checkbox on the page. 基本上我希望它发生在页面上的每个复选框上。 Is this method of firing on the click and checking the state ok? 这种方法是点击并检查状态好吗？

I'm thinking there must be a cleaner jQuery way. 我认为必须有一个更清晰的jQuery方式。 Anyone know a solution? 有人知道解决方案吗？

---

#1楼

参考：https://stackoom.com/question/ZLGL/jQuery复选框选中状态更改事件

---

#2楼

If your intention is to attach event only on checked checkboxes (so it would fire when they are unchecked and checked later again) then this is what you want. 如果您打算仅在已选中的复选框上附加事件（因此在取消选中并稍后再次检查时会触发），那么这就是您想要的。

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

    })
})

if your intention is to attach event to all checkboxes (checked and unchecked) 如果您打算将事件附加到所有复选框（已选中和未选中）

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

    })
})

if you want it to fire only when they are being checked (from unchecked) then @James Allardice answer above. 如果你想要它只在被检查时（从未选中）开始，那么@James Allardice会在上面回答。

BTW input[type='checkbox']:checked is CSS selector. BTW input[type='checkbox']:checked是CSS选择器。

---

#3楼

For future reference to anyone here having difficulty, if you are adding the checkboxes dynamically, the correct accepted answer above will not work. 为了将来参考任何有困难的人，如果您动态添加复选框，上面正确接受的答案将无效。 You'll need to leverage event delegation which allows a parent node to capture bubbled events from a specific descendant and issue a callback. 您需要利用事件委派 ，允许父节点捕获来自特定后代的冒泡事件并发出回调。

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

Note that it's almost always unnecessary to use document for the parent selector. 请注意，几乎总是不必将document用于父选择器。 Instead choose a more specific parent node to prevent propagating the event up too many levels. 而是选择更具体的父节点，以防止将事件传播到太多级别。

The example below displays how the events of dynamically added dom nodes do not trigger previously defined listeners. 下面的示例显示动态添加的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> 

While this example displays the usage of event delegation to capture events for a specific node ( h1 in this case), and issue a callback for such events. 此示例显示事件委派的用法，以捕获特定节点的事件（在本例中为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> 

---

#4楼

Just another solution 只是另一个解决方

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

---

#5楼

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

---

#6楼

也许这可能是你的另一种选择。

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