复选框中的 JQuery/JavaScript 更改

Posted 2023-05-08

【中文标题】复选框中的 JQuery/JavaScript 更改

【英文标题】：JQuery/JavaScript change in the checkbox

【发布时间】：2021-04-07 13:53:32

【问题描述】：

我有一个简单的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>

【问题讨论】：

将您的选择器更改为$(document).on('change', '#listfilters input[type=checkbox]', function(e)

【参考方案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>

【参考方案2】：

您可以直接选择div 而不是document，以获得更快/更快的选择器。

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