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

Question

我想检查所有基于 Div ID 和复选框 Class 的复选框。不同 div 中的所有复选框都具有相同的 class。我想在那个特定的 div 中选中按钮单击时的所有复选框。我不想像下面这样使用 input[type='checkbox'] 。我只想使用 Class 名称。我可以这样做吗？

 $('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>

Answer 1

使用 class 选择器直接调用 'prop()' 方法，如下所示：

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

编辑：

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

Answer 2

如果您希望在单击 'Select All' 按钮时 select 一组中的所有复选框元素，您可以为 'Select All' 元素指定一个通用的 class 名称，并且然后附加一个 click 事件侦听器。

您可以使用 .nextAll() 到 select 所有后续的 .check 元素：

Example Here

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

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

Example Here

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

如果你想 select 基于被点击的 'Select All' 按钮的 id 中的数字的元素，你可以使用以下方法：

Example Here

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

Answer 3

你可以这样做：

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

DEMO

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

Check All Checkboxes based on Div Id and Class using Jquery

javascript

checkbox

jquery