JQuery/JavaScript 更改复选框

Question

我有一个简单的 div，里面有多个复选框。我想查找复选框中的任何更改以进行 ajax 查询。此代码无法看到这些复选框中的更改。正确的做法是什么？

$(document).on('change', '#listfilters checkbox', function(e) {
        if(this.checked) {
            alert("changed");
          // checkbox is checked
        }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="listfilters">
    <p>
    <input type="checkbox" id="showall" name="showall" value=0>&nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp;
    <label for="showfl">Filtered</label>
    </p>
</div>

Answer 1

您需要限定选择器的复选框部分。将其更改为 #listfilters [type=checkbox]

$(document).on('change', '#listfilters [type=checkbox]', function(e) {
        if(this.checked) {
            alert("changed");
          // checkbox is checked
        }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="listfilters">
    <p>
    <input type="checkbox" id="showall" name="showall" value=0>&nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp;
    <label for="showfl">Filtered</label>
    </p>
</div>

Answer 2

您可以 select 直接 div 而不是 document 以获得 quick/faster select 或

$("#listfilters").on('change', 'input[type=checkbox]', function(e) {
        if(this.checked) {
            alert($(this).val());             
        }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="listfilters">
    <p>
    <label for="showall"><input type="checkbox" id="showall" name="showall" value="showall">&nbsp;
    Show All</label>
    </p>
    <p>
    <label for="showfl"><input type="checkbox" id="showfl" name="showfl" value="Filtered">&nbsp;
    Filtered</label>
    </p>
</div>

JQuery/JavaScript 更改复选框

JQuery/JavaScript change in the checkbox

html

javascript

ajax

checkbox

jquery