jQuery问题与复选框动态检查选择器

如何解决jQuery问题与复选框动态检查选择器

我对jQuery有问题。我有一个带有form的html页面。

在我的form中，我有一个select：

<select class="form-control" id="macro_area" name="macro_area">
  <option value="0">Select type</option>
  <option value="1">test</option>
  <option value="7">Other</option>
</select>

当我选择一个选项时，我使用此jQuery函数加载一个PHP文件：

$('document').ready(function() {
    $('#macro_area').on('change',function() {
        request = $.ajax({
             type: "POST",url: "get_bus_act_subcat.PHP",data: { id_macro_area: id_macro_area },dataType: "html"
        });   

        request.done(function(response) { 
            $(".act_subcat").html (response);
        });
});

该过程正常工作，并将HTML代码（从文件get_bus_act_subcat.PHP生成）添加到页面中，该页面原来是空的div（<div class="form-group act_subcat">）中。

生成并插入到页面中的代码与此类似：

<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkBox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
      </div>
      <div class="col-sm-3">
        <input type="checkBox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
      </div>
      <div class="col-sm-3">
        <input type="checkBox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
     </div>
   ......     
    </div>
  </div>
</div>

所以最终结果是：

<div class="form-group act_subcat"> //this div is present on page when load
<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkBox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
      </div>
      <div class="col-sm-3">
        <input type="checkBox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
      </div>
      <div class="col-sm-3">
        <input type="checkBox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
     </div>
   ......     
    </div>
  </div>
</div>
</div>

现在我有问题...我想用jQuery检查是否已选中任何复选框，但标准解决方案/选择器不起作用。

我认为是因为以后已添加了复选框字段。

有什么想法或建议吗？

谢谢

解决方法

以下内容可能对您有帮助？

$('.act_subcat').on('change','input',function(ev){console.log(this.id+" was clicked and is"+(this.checked?"":" not")+" checked");}
)
$('document').ready(function(){
 $('#macro_area').on('change',function(){
   $(".act_subcat").html(insertHTML(this.value));
 });
});

// substitute for AJAX:
function insertHTML(i){return `<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="5">Test${i++}
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="6">Test${i++}
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="2">Test${i}
     </div> 
    </div>
  </div>
</div>`;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="macro_area" name="macro_area">
  <option value="0">Select type</option>
  <option value="1">test</option>
  <option value="7">Other</option>
</select>
<div class="act_subcat"></div>

我用另一个HTML导入功能替换了您的AJAX部分。我用.on相对于.act_subcat容器演示了事件绑定。每当此容器input中的change个元素时，内部函数就会触发。这将适用于任何动态添加的内容。试试吧。

,

您可以采取的一种方法是将事件侦听器附加到返回的内容上，然后再将其添加到页面中：

$(response).find(':checkbox').on('change',function() {
    console.log( `Checkbox with id: ${this.id} was clicked` );
});
//then ... append it ......html( response );