jQuery：一些复选框不包括在内答案

【问题标题】：jQuery: Some Checkboxes Not IncludedjQuery：一些复选框不包括在内
【发布时间】：2014-01-09 18:10:30
【问题描述】：

每当单击复选框时，我都会尝试在 div 中添加或删除 html，并且我已经让它适用于某些复选框，但不是所有复选框。

某些复选框在页面加载时最初位于页面上，而其他复选框则是动态添加的。在原始页面加载时存在的复选框正确地完成了它们应该做的事情，但是动态添加的那些在 jQuery 调用中没有被 .change() 选中。

我在代码中放置了一个 alert() ，它应该接收复选框的任何更改，它只对原始复选框执行，但我也有 checkAll 和 uncheckAll javascript 函数，它们成功地完成了他们应该为所有人做的事情复选框。

这里是从 Firebug 的 Inspect Element 中获取的 sn-p，它位于 html 区域中，显示有问题的复选框：

<div class="orglist" style="background:#dddddd;color:#777777;">
Orgs to be included:
<br>
<input id="org_10346" class="ckbx" type="checkbox" checked="" value="10346" name="org_10346">
XYZ
<br>
<div id="additional">
<input id="org_3" class="ckbx" type="checkbox" checked="" value="3" name="org_3">
GHI
<br>
</div>
<b>Add an additional org:</b>
<br>
<select class="org_type " name="org_type">
<option selected="yes" value=""> </option>
<option value="company">company</option>
<option selected="yes" value="facility">facility</option>
<option value="supplier">supplier</option>
</select>
<br>
Supplier:
<select class="supplier_select" name="org_select">
<option value="ERR">***SELECT ONE***</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
<option value="3">GHI</option>
</select>
<input id="addOrgID" type="button" value="Add" onclick="addOrg()">
<br>
<a href="javascript:checkAll()">Check All</a>
|
<a href="javascript:uncheckAll()">Uncheck All</a>
</div>

这里是应该处理事情的 Javascript 函数：

jQuery('input:checkbox, .ckbx').change(function(){
      //Loop through all checkboxes and append div for each one that's checked to the fieldset
      $tempName=this.name;
      alert($tempName);
      $theID = "#fac"+this.id.substr(4);
      $orgID = "#org"+this.id.substr(4);
      if(jQuery('input[name='+$tempName+']').val()){
        jQuery($theID).show();
        jQuery($orgID).show();
      }
      else{
        jQuery($theID).hide();
        jQuery($orgID).hide();
      }
      jQuery("select").each(function(){
          if('electricity'==this.value){
        jQuery(".elec"+this.name.substr(5)).show();
              jQuery(".gas"+this.name.substr(5)).hide();
          }
          if('gas'==this.value){
              jQuery(".elec"+this.name.substr(5)).hide();
              jQuery(".gas"+this.name.substr(5)).show();
          }
          if('both'==this.value){
        jQuery(".elec"+this.name.substr(5)).show();
        jQuery(".gas"+this.name.substr(5)).show();
          }
        });
    }).change();
    });

function checkAll(){
  jQuery(':checkbox').prop('checked', true).change();
};

function uncheckAll(){
  jQuery(':checkbox').prop('checked', false).change();
}

感谢您的任何建议！

【问题讨论】：

标签： jquery checkbox selector

【解决方案1】：

不仅要处理原始复选框，还要处理一次动态添加的复选框，您需要使用带有.on 的事件委托。因此，而不是

jQuery('input:checkbox, .ckbx').change(function(){

你现在需要

jQuery('div.orglist').on('change', 'input:checkbox, .ckbx', function(){

【讨论】：

事件委托参考：api.jquery.com/on/#direct-and-delegated-events

【解决方案2】：

使用您当前的代码，jQuery 会选择加载时存在的所有复选框并绑定到它们的“更改”事件。但是，添加新复选框后，此绑定不会再次运行！

一种选择是在动态创建每个新复选框的change 事件时将该函数绑定到它们。

【讨论】：