флажки внутри диапазона, отмените выбор - PullRequest
3 голосов
/ 30 июня 2010

У меня есть следующий HTML, сгенерированный с помощью моего php-кода.
Что я хочу сделать, так это то, что когда я устанавливаю флажок в диапазоне «строка», тогда флажки для диапазона «main_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>​

Ответы [ 2 ]

3 голосов
/ 30 июня 2010

Вот решение, которое (я думаю) делает то, что вы хотите.

(Использовал пример Ника в качестве отправной точки. Я вижу, что Ник опубликовал похожее решение, но этот подход использует другой подход.)

В дополнение к тому, что вы запросили, если вы нажмете кнопкуфлажок под .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);
});
3 голосов
/ 30 июня 2010

Как только вы внесете изменения, предложенные @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") чтобы получить все элементы <span> между нажатием .main_row и следующим, так что эта категория. Затем он получает все флажки и устанавливает их свойство checked таким же, как флажок в .main_row, который вы щелкнули.

Если там есть что-то кроме .row, вы можете добавить .filter(".row") после .nextuntil(), чтобы ограничить его элементами .row.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...