使用 Jquery 检查基于 Div Id 和 Class 的所有复选框答案

【问题标题】：Check All Checkboxes based on Div Id and Class using Jquery使用 Jquery 检查基于 Div Id 和 Class 的所有复选框
【发布时间】：2015-05-11 23:03:38
【问题描述】：

我想根据 Div ID 和 Checkbox Class 检查所有复选框。不同 div 中的所有复选框具有相同的类。我想检查该特定 div 中的按钮单击上的所有复选框。我不想像下面那样使用 input[type='checkbox'] 。我只想使用类名。我可以这样做吗？

 $('div#'+Id+' input[type=checkbox]').each(function () {            
        $(this).prop('checked', true);
    });

下面是我的代码。

<div id="div1">
<input type="button" id="btnDiv1" value="Select All" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank
</div>

<div id="div2">
<input type="button" id="btnDiv2" value="Select All" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" /> Matt
</div>

<div id="div3">
<input type="button" id="btnDiv3" value="Select All" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles
</div>

【问题讨论】：

你的 jquery 代码不清楚..你能提供你的代码的 jsfiddle 吗..？
您要检查所有这些，基于什么条件？
@Rakesh_Kumar 基于全选按钮点击。

标签： javascript jquery checkbox

【解决方案1】：

使用您的类选择器直接调用“prop()”方法，如下所示：

$('div#'+Id+' input.check').prop('checked', true);

编辑：

$('input[type=button]').click(function() {
   $(this).parent().find('.check').prop('checked', true);
});

【讨论】：

我不想使用输入检查。我在问题中明确提到了这一点。
对不起，你在我回答后编辑你的帖子......：/但你能解释一下为什么你不想使用复选框选择器吗？ :O
它的要求与类名有关。

【解决方案2】：

如果您想在单击“全选”按钮时选择组内的所有复选框元素，您可以为“全选”元素指定一个通用类名，然后附加一个click 事件侦听器。

您可以使用.nextAll() 来选择所有后续的.check 元素：

Example Here

$('.select-all').on('click', function () {
    $(this).nextAll('.check').prop('checked', true);
});

..或者您可以选择最接近的div 祖先，然后选择其中的所有.check 元素：

Example Here

$('.select-all').on('click', function () {
    $(this).closest('div').find('.check').prop('checked', true);
});

如果您想根据点击的“全选”按钮id 中的数字来选择元素，您可以使用以下命令：

Example Here

$('.select-all').on('click', function () {
    $('#div' + this.id.replace(/\D/g, '') +' .check').prop('checked', true);
});

【讨论】：

这给出了 typeError - 无法读取 null 的属性“on”。有没有其他方法可以做到这一点？

【解决方案3】：

你可以这样做：

$('div').on('click',function(){
   $(this).find('input:not([type=button])').prop('checked',true);
});

DEMO

【讨论】：

我在问题中明确提到使用类而不使用输入类型。