jquery 范围内的复选框，选择取消选择

rta7y2nd 于 2022-12-22 发布在 jQuery

关注(0)|答案(2)|浏览(133)

我有下面的html通过我的PHP代码生成。
我想做的是，当我选择span“row”中的复选框时，“main_row”的复选框将包含“row”，
应自动检查。
另外，当我取消选中“main_row”复选框时，“row：复选框”应取消选中。
我可以使用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>

jquery

来源：https://stackoverflow.com/questions/3151819/checkboxes-within-the-span-select-deselect

2条答案

按热度按时间

hgtggwj01#

帕特里克建议，一旦将id更改为class，就可以执行以下操作：

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

You can try a demo here，当您选中/取消选中.main_row中的复选框时，它会转到它所在的.main_row，使用.nextUntil(".main_row")获取单击的.main_row和下一个.main_row之间的所有<span>元素，然后它会获取所有的复选框，并将它们的checked属性设置为与你点击的.main_row中的复选框相同。
如果其中除了.row之外还有其他内容，可以在.nextuntil()之后添加一个.filter(".row")，以将其限制为.row元素。

赞(0）回复(0）举报 2022-12-22

j7dteeu82#

这里有一个解决方案，（我认为）做你想要的。
(Used 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);
});

赞(0）回复(0）举报 2022-12-22

我来回答

jquery 范围内的复选框，选择取消选择

2条答案

相关问题

热门标签

最新问答