检查所有 jquery 不适用于动态填充的复选框

Question

我有一个 jquery 函数来 select 所有复选框，这些复选框在 PHP 循环中填充。循环的输出类似于以下内容：

<label class="check"><input type="checkbox" name="selectall" value="All"/> Select All</label>
<label class="col-md-3 col-xs-12 control-label">Types Of function</label>
<div class="col-md-6 col-xs-12">                                                                                            
    <div class="col-md-7">                                    
        <label class="check"><input type="checkbox"  name="chkUser" class="icheckbox"/> Birthday</label>
    </div>
    <div class="col-md-7">                                    
        <label class="check"><input type="checkbox"  name="chkUser" class="icheckbox"/> Family Function</label>                   
    </div>
    <div class="col-md-7">                                    
        <label class="check"><input type="checkbox"  name="chkUser" class="icheckbox"/> conference</label>                        
    </div>
    <div class="col-md-7">                                    
        <label class="check"><input type="checkbox"  name="chkUser" class="icheckbox"/> wedding</label>                           
    </div>
    <div class="col-md-7">                                    
        <label class="check"><input type="checkbox"  name="chkUser" class="icheckbox"/> Corporate</label>                             
    </div>
</div>

而 jquery 函数是：

$('.selectall').click(function() { //alert('HHH');
    if ($(this).is(':checked')) {
        $('.icheckbox').attr('checked', 'checked');
    } else {
        $('.icheckbox').attr('checked', false);
    }
});

但不幸的是它不起作用！怎么了？

Jsfiddle Here

Answer 1

使用 prop() 设置选中和未选中

  $('[name=selectall]').change(function() {  
         $('.icheckbox').prop('checked', this.checked);
    });

注意：您的 html

中没有 selectall class

prop demo

attr domo 只工作一次

Answer 2

您必须将class="selectall"添加到全选复选框

<input type="checkbox" name="selectall" value="All" class="selectall">

建议按照 Bala 的建议使用 prop()。

Answer 3

$(文档).ready(函数() { $('[name=selectall]').click(function () {

            if ($(this).is(':checked')) {
                $('.icheckbox').attr('checked', 'checked');
            } else {
                $('.icheckbox').attr('checked', false);
            }
        });
    });

或将标签名称更改为 Id 并尝试以下代码

$(文档).ready(函数() { $('#selectall').click(函数 () {

            if ($(this).is(':checked')) {
                $('.icheckbox').attr('checked', 'checked');
            } else {
                $('.icheckbox').attr('checked', false);
            }
        });
    });

检查所有 jquery 不适用于动态填充的复选框

check all jquery not working for dynamically populated checkbox

checkbox

jquery

attributes