多个复选框可触发js脚本 [英] Multiple checkboxes to trigger a js script

问题描述

我在while循环中生成了多个列表.每个列表都有一个分配给它的组ID，并存储在变量中.每个列表项都有一个复选框.我希望每个列表下面都有一个全选"选项.

I have multiple lists generated inside a while loop. Each list has a group id assigned to it, and stored in a variable. Each list item has a checkbox. I want to be able to have a "Select All" option below each list.

虽然我拥有的代码对于单个列表可以很好地工作，但是对于多个列表，它只能在其中一个列表上工作. 我相信这是由于每个列表在复选框上具有相同的类名.我可以将组ID附加到每个类中，但这意味着将脚本包含在while循环中，这在过去被告知是不正确的.

Whilst the code I have works fine for a single list, with multiple lists it only ever works on one of them. I believe this is due to each list having the same class name on the checkbox. I could append the group id to each class, but that would mean having the script inside the while loop, which I was told in the past is not correct.

我当前用于每个列表项的复选框代码的示例是

An example of my current checkbox code for each list item is

<input type="checkbox" name="ids[1881:b4568df26077653eeadf29596708c94b]" id="cl-checkbox1881:b4568df26077653eeadf29596708c94b" class="cl-checkbox" onclick="clRowSelection(this);" />

每个组可能有多个.

我的全选"复选框代码是

My "Select All" checkbox code is

<input type="checkbox" name="cl_select_all_1" id="cl-checkall" />

每个组中会有一个.

我的剧本是

jQuery("#cl-checkall").change(function() {
    jQuery(".cl-checkbox").prop('checked', jQuery(this).prop("checked"));
});

jQuery('.cl-checkbox').change(function() { 
    if(false == jQuery(this).prop("checked")) {
        jQuery("#cl-checkall").prop('checked', false);
    }
    if (jQuery('.cl-checkbox:checked').length == jQuery('.cl-checkbox').length ){
        jQuery("#cl-checkall").prop('checked', true);
    }
});

我了解到我可以使用诸如data-groupID ="mygroupID"之类的东西，然后使用$(this)将其传递到脚本中，以便它知道选中了哪个复选框.

I read that I can use something like data-groupID="mygroupID", and then pass that into the script using $(this) so it knows which checkbox was selected.

我认为我需要针对列表执行此操作

I believe I need to do this for the list:

<input type="checkbox" name="ids[1881:b4568df26077653eeadf29596708c94b]" id="cl-checkbox1881:b4568df26077653eeadf29596708c94b" class="cl-checkbox" data-groupID="mygroupID" onclick="clRowSelection(this);" />

，然后选择全选:

<input type="checkbox" name="cl_select_all_1" id="cl-checkall" data-groupID="mygroupID"/>

但是我在如何添加上陷入困境

but I'm stuck on how to add

$(this).data('groupID')

访问脚本以使其正常工作.

to the script to get it working.

我对使用$(this)作为解决方案的理解可能是完全错误的！

I may be completely wrong in my understanding of the use of $(this) as a solution!

推荐答案

在全选更改处理程序中，您可以仅选择与当前groupID

Inside your select all change handler, you can select just the inputs that match your current groupID

jQuery(".cl-checkall").change(function() {
    jQuery('.cl-checkbox[data-groupID="' + jQuery(this).data("groupid") + '"]')
        .prop('checked', jQuery(this).prop("checked"));
});

这实际上是您已经拥有的，但是我们正在将数据选择器添加到jQuery搜索中以排除页面上的其他复选框.

This is effectively what you have already, but we're adding the data selector to the jQuery search to exclude the other checkboxes on the page.

jQuery(this).data("groupid")(jQuery要求数据属性名称为小写)将返回已更改元素的数据属性，而[data-groupID="x"]将仅匹配具有groupID x

The jQuery(this).data("groupid") (jQuery requires data attribute names to be lower case) will return the data attribute for the changed element, and the [data-groupID="x"] will only match elements with the groupID x

(由于您现在有多个，所以您可能还希望开始使用全选复选框上的类而不是ID，我将其更改为使用.cl-checkall)

(As you now have multiple of them, you will probably also want to start using a class on the select-all checkbox instead of an ID, I've changed it to using .cl-checkall)

可以将相同的更改应用于单个复选框侦听器，只需选择具有匹配数据属性的全选.

The same changes can be applied to the individual checkbox listener, only selecting the select-all with the matching data attribute.

jQuery('.cl-checkbox').change(function() { 
    if(false == jQuery(this).prop("checked")) {
        jQuery('.cl-checkall[data-groupID="' + jQuery(this).data("groupid") + '"]').prop('checked', false);
    }
    if (jQuery('.cl-checkbox[data-groupID="' + jQuery(this).data("groupid") + '"]:checked').length == jQuery('.cl-checkbox[data-groupID="' + jQuery(this).data("groupid") + '"]').length ){
        jQuery('.cl-checkall[data-groupID="' + jQuery(this).data("groupid") + '"]').prop('checked', true);
    }
});

这篇关于多个复选框可触发js脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！