Question

我不确定标题是否正确或我的解释是否正确。我希望当您看到示例小提琴时，我理解我正在尝试做的事情。 https://jsfiddle.net/bg3045rs/

我使用的javascript代码如下：

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked)
    .trigger("change");
});

$(".selector").on("change", function() {
  var parent = $(this).closest("form");

  $("#" + parent.data("checktable"))
    .find('[dbval="' + this.name + '"]')
    .toggleClass("highlight", $(this).is(":checked"));
  parent
    .find(".all")
    .prop(
      "checked",
      parent.find(".selector:checked").length === parent.find(".selector").length
    );
});

$(".all").on("change", function() {
  $(this).closest("form").find(".selector")
    .prop("checked", $(this).is(":checked"))
    .trigger("change");
});

$(".all:checked").each(function() {
  $(this).closest("form").find(".selector").prop("checked", true).trigger("change");
});

$(".selector").trigger("change");

请记住，我没有编写此代码。虽然效果很好，但我不能做一点调整。从示例小提琴中可以看出，当我尝试分别创建全选（表1＆2）和全选（表3＆4）时，我失败了。我想要专家对代码进行修改，应该进行哪些更改，以便在此处实现选择性突出显示。请问是否有不清楚的地方，谢谢！

Answer 1

将输入更改为

<input type="checkbox"  name="CheckAll" class="checkAll" class="all" data-form="#form1,#form2">
      All (Table 1&2)</label>

和您的js：

$(".checkAll").click(function(){
    $($(this).attr('data-form')).find('input:checkbox').not(this).prop('checked', this.checked)
    .trigger("change");
});

我创建了一个自定义属性，在其中存储了您需要切换的表单的ID，此后，我更改了点击功能以仅针对数据属性中的表单切换状态

复选框选择的多个实例

1 个答案: