复选框在span内，选择/取消选择

Question

我通过PHP代码生成以下HTML。
我想要实现的是当我选择 "row" span 中的复选框时，包含 "row" 的 "main_row" span 中的复选框应该自动选中。
同时，当我取消选择 "main_row" 复选框时，所有包含在 "row:checkboxes" 中的复选框都应该取消选择。
我可以使用JavaScript或jQuery来实现这个目的。

<span id="mainTopHeading" >Imports &amp; Exports</span>
<span id="lblmainTopHeading">Categories</span>
<span id="main_row" class="mystyleClass" >
    <input type="checkbox" id="pH" curstomerName="Zubair & CO" recordID="1920"  />
    <span title="Zubair & CO"  id="pHName">Zubair &amp; CO</span>
    <span title="Roland">Roland</span>
</span>
<span id="row"  recordID="1920"  curstomerName="Zubair & CO"   >
    <input type="checkbox"  recordID="1920" curstomerName="Zubair & CO"  />
    <span>Order  Rice &amp; Sugar</span>
    <span>Roland</span>
</span>

<span id="mainTopHeading" >Manufacturing</span>
<span id="lblmainTopHeading">Categories</span>

<span id="main_row" class="mystyleClass" >
    <input type="checkbox" id="pH" curstomerName="Howard Manufacturing" recordID="1870"  />
    <span title="Howard Manufacturing"  id="pHName">Howard Manufacturing</span>
    <span title="Roland"> Roland</span>
</span>
<span id="row" index="1" recordID="1870"  curstomerName="Howard Manufacturing"  >
    <input type="checkbox" style="left:10;" recordID="1870"  curstomerName="Howard Manufacturing" />
    <span>Order Tires and Plastic products</span>
    <span>Roland</span>
</span>
<span id="row" index="1" recordID="1870"  curstomerName="Howard Manufacturing"  >
    <input type="checkbox" style="left:10;" recordID="1870"  curstomerName="Howard Manufacturing" />
    <span>Order Electronics</span>
    <span>Roland</span>
</span>

<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="James & Sons" recordID="1866"  />
    <span title="James & Sons"  id="pHName">James &amp; Sons</span>
    <span title="Roland">Roland</span>
</span>
<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="Villa Thresa Inc" recordID="1866"  />
    <span title="Villa Thresa Inc"  id="pHName">Villa Thresa Inc</span>
    <span title="Roland">Roland</span>
</span>
<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="Bangkok Manufacturing" recordID="1866"  />
    <span title="Bangkok Manufacturing"  id="pHName">Bangkok Manufacturing</span>
    <span title="Roland">Roland</span>
</span>

<span id="row"  recordID="1920"  curstomerName="Zubair & CO"   >
    <input type="checkbox"  recordID="1920" curstomerName="Zubair & CO"  />
    <span>Order  Rice &amp; Sugar</span>
    <span>Roland</span>
</span>

<span id="mainTopHeading">Misc.</span>
<span id="lblmainTopHeading">Different things</span>
<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="Bangkok Manufacturing" recordID="1866"  />
    <span title="Bangkok Manufacturing"  id="pHName">Bangkok Manufacturing</span>
    <span title="Roland">Roland</span>
</span>​

- Asim Zaidi

---

您有几个具有相同ID的元素，例如main_row和row。这是无效的，因为ID必须是唯一的，并且不能在同一页上重复使用。这可能会导致问题。 - user113716

此外，您的具有“row” ID（应为类）的<span>元素似乎并未包含在一个名为main_row的容器中，这与您的问题所暗示的不同。 - user113716

好的，它们是通过 PHP 生成的，因此可能会有多个实例。我可以添加一个 class="main_row" 和一个 class="row"。如果我这样做了，那么我们该如何解决呢？谢谢。 - Asim Zaidi

你现在的标记语言会遇到各种问题。如果你想要建立一个层次关系，你的标记元素应该按照这种方式布局，否则，你会给自己带来不必要的麻烦。如果你将行跨度嵌套在主行跨度内，那么你的问题就有一个非常简单的答案。此外，如果你可以更改/添加元素的类，那么你应该能够更改ID，对吧？ - wowo_999

Answer 1

当你按照@patrick的建议将id改为class后，你可以这样做：

$(".main_row :checkbox").change(function() {
  $(this).closest(".main_row").nextUntil(".main_row")
         .find(":checkbox").attr("checked", this.checked);
});

您可以在这里尝试演示，当您在.main_row中勾选/取消复选框时，它会上移到所在的.main_row，使用.nextUntil(".main_row")获取点击的.main_row和下一个之间的所有<span>元素，即此类别。然后获取其中的任何复选框，并将其checked属性设置为您单击的.main_row中的复选框相同。

如果除了.row之外还有其他内容，则可以在.nextuntil()之后添加.filter(".row")以限制它仅限于.row元素。

- Nick Craver

---

我认为OP希望触发器在.row下的checkbox上: *'当我选择span "row"下的复选框时'*。所以你需要先回溯到.main_row。我仍然认为问题暗示了不存在的嵌套。在我查看CSS并意识到你使用了nextUntil()之前，你的例子真的让我困惑不已。 :o) - user113716

嗨，Nick Craver谢谢你的回复，但是它的工作方式相反了。我想要的是当我勾选子复选框时，它应该勾选主复选框，如果没有子复选框被勾选，则主复选框不应该被勾选。你能告诉我怎么做吗？再次感谢。 - Asim Zaidi

@user295189 - 你是指这样吗？http://jsfiddle.net/rzwzF/2/ 我还在努力理解你具体想要什么 :) - Nick Craver

Nick Craver，差不多了！唯一的问题是如果没有子复选框，它不允许我进行选择。即使没有子复选框，我仍然希望能够进行选择。非常感谢。 - Asim Zaidi

@user295189 - 将第一个和第三个示例结合起来，像这样：http://jsfiddle.net/rzwzF/4/ - Nick Craver

Answer 2

这里有一个解决方案（我认为）能够满足您的需求。

（以Nick的示例为起点。我看到Nick发布了类似的解决方案，但这个解决方案采用了不同的方法。）

除了您要求的内容外，如果您选中.main_row下面的复选框，它将选中/取消所有相关的.row复选框。

试一下：http://jsfiddle.net/nykda/

$(".row input").change(function() {
    var $row= $(this).closest(".row");
    var $main_row = $row.prev('.main_row').length ? $row.prev('.main_row') : $row.prevUntil(".main_row").prev();
    $main_row.find(":checkbox").attr("checked", function(i,attr) {
        return $main_row.nextUntil('.main_row').filter(':has(input:checked)').length ? "checked" : false;
    });
});

$(".main_row input").change(function() {
    $(this).closest(".main_row").nextUntil('.main_row').children(':checkbox').attr('checked', this.checked);
});

- user113716

---

+1 - 很高兴你解决了这个问题，我正在深入研究为什么有人认为我们在 .Net 中需要 CookieCollection 和 CookieContainer。:-/ - Nick Craver