使用Jquery通过部分名称获取类名

Question

你好，我正在编写一个脚本来检查与主复选框相关的所有从复选框。这将使用类完成。因此，主复选框将具有类似于“master1”，“master2”等的类。相关的从复选框将具有“slave1”类（与master1相关），“slave2”（与master2相关）等。

所以我将从以下内容开始：

jQuery('.checks_div input[type="checkbox"].^="master"').click(function(){

当点击主控件时，我想选择所有相关的从属控件并将它们选中。但是如何实现呢？

谢谢。

- Dima

---

你能给我展示一下你的HTML代码吗？ - muthu

Answer 1

$('input[type="checkbox"][class^="master"]').on("click",function(){})

但是委派更好。

$(document.body).on('click','input[type="checkbox"][class^="master"]',function(){})

如果您的从属复选框在主复选框相邻的 div 中，则在单击函数内部执行操作。

var $slaves=$(this).next().find('input[type="checkbox"][class*="slave"]')

如果HTML不同，我们将想出一种方法从$(this)中选择那些被选中的框，即盒子。

一旦您的“slaves”（指被选中的盒子）在jQuery对象中，要检查它们：

$slaves.prop('checked', true);

查看使用jQuery设置复选框的“checked”状态？

如果您只需要勾选它们，甚至不需要在jQuery对象中缓存从属对象。

 $(this).//chain to select slaves
        .prop('checked', true)

- mikakun

---

我写了这段代码：$(document.body).on('click','input[type="checkbox"][class^="master"]',function(){ var $slaves=$(this).next().find('input[type="checkbox"][class*="slave"]'); $($slaves).click(); /$('input[class^="slave"]').click();/ }); 但它不起作用。从这个输入框开始，下一个输入框就是“从属者”，但中间还有br和label标签。我不太明白"$"在$slaves中的作用。 - Dima

@Dima，$符号实际上什么也不做，只是提醒这个变量是一个jQuery对象，因此只是一种命名约定，以澄清代码；然后由于它是一个jQuery对象，您不需要使用$($slaves)，而是可以使用$slaves.trigger("click")（除非您将一些单击事件绑定到它们）。显示至少有几个“主”和他们的“从”的HTML。 - mikakun

Answer 2

好的，这是我写的代码：

$(document.body).on('click','input[type="checkbox"][class^="master"]',function(){
  var slaves = $(this).next('label').next('div.slaves').find('input[type="checkbox"][class*="slave"]');
  var master = $(this);
  $(slaves).attr('checked', $(this).is(':checked'));
});

这个很好用。虽然我发现在jquery版本1.9.0及以上可能存在一个bug，链接如下： http://jsfiddle.net/x3NpL/

1.8.3可以正常工作，如果你升级到更高的版本，它会工作两次然后停止工作...非常奇怪。顺便说一句，如果使用$(slaves).click()，就不会出现这种情况，但是click()没有期望的结果。

无论如何，我使用的解决方案是添加一个div来包含相关的从属，但我仍然想知道如何在没有div的情况下实现它。这个想法很简单：捕获主元素的点击事件，获取其类别编号（master14-编号14等），检查所有具有此编号的从属元素（slave14）。 我只是不知道如何从中获取数字，考虑到该类别可能包含多个类别，例如class="class1 class2 master14"。

谢谢

- Dima

---

嘿，你应该接受我的答案，而不是发布一份复制粘贴我的代码的副本（如上面解释的有错误的 $(slaves)...）。 - mikakun