jquery - Jquery如何检查两者之间的复选框

Question

如何勾选代码 6000，它会自动选中 7000 之间的复选框？如果选中 7000，这也会在 7000 和 7004 之间

    $('.mGrid tr').each(function () {
    if (!this.rowIndex) return;
    if ($(this).find("td:eq(2)").text() =='S') {
        $(this).css({
            'font-weight': '800',
            'background-color': '#DBFF94',
            'border' : '2px solid black'
        });

    }
});
<table class="mGrid" cellspacing="0" rules="rows" border="1" id="GridView1" style="border-collapse:collapse;">
            <tr align="left">
                <th scope="col">
                                <span class="chkHeader"><input id="GridView1_chkAll" type="checkbox" name="ctl00$MainContent$nnn$GridView1$ctl01$chkAll" /></span>
                            </th><th scope="col">Code</th><th scope="col">Sub Code</th><th scope="col">Title</th><th scope="col">Description</th><th class="HiddenColumn" scope="col">&nbsp;</th>
            </tr><tr>
                <td>
                                <span class="chkItem"><input id="GridView1_chkCheck_0" type="checkbox" name="ctl00$MainContent$nnn$GridView1$ctl02$chkCheck" /></span>
                            </td><td>1000</td><td>S</td><td>Main</td><td>Summary of everything </td><td class="HiddenColumn"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$nnn$GridView1&#39;,&#39;Select$0&#39;)">Select</a></td>
            </tr><tr class="alt">
                <td>
                                <span class="chkItem"><input id="GridView1_chkCheck_1" type="checkbox" name="ctl00$MainContent$nnn$GridView1$ctl03$chkCheck" /></span>
                            </td><td>6000</td><td>S</td><td>Report</td><td>All Reports</td><td class="HiddenColumn"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$nnn$GridView1&#39;,&#39;Select$1&#39;)">Select</a></td>
            </tr>
        </table>

添加了html部分，有点乱

＃＃＃＃更新

如果我想在两者之间选择 1，例如，选中 6001-6005，代码 6000 复选框将自动选中，我该怎么做？$(this).closest('tr').prevUntil('tr.lights').css('background-color','black'); 我尝试 prevUntil，但它几乎突出显示了所有 prev $(this).closest('tr').prev('tr.lights').css('background-color','black'); 这只能在靠近绿色行时突出显示

Answer 1

查看工作版本http://jsbin.com/edamuh/3/edit

如果您有以下 HTML（请注意输入是同级的）

  1<input type="checkbox"/>
  2<input type="checkbox"/>
  3<input type="checkbox"/>
  4<input type="checkbox"/>
  5<input type="checkbox"/>
  6<input type="checkbox"/>
  7<input type="checkbox"/>
  8<input type="checkbox"/>
  9<input type="checkbox"/>
  0<input type="checkbox"/>

您可以使用以下代码段来检查复选框，直到下一个选中

 $('input').click(function(){
    var $t = $(this);
    var unchkds = $t.nextUntil('input:checked', 'input[type="checkbox"]');
    var allInputsAfterN = $t.nextAll('input').length;
    if(unchkds.length > 0 && unchkds.length != allInputsAfterN) {
       console.log(unchkds.length + " unchecked after. " + allInputsAfterN + " total after");
      unchkds.prop('checked', true);
    }
  });

您必须执行类似的操作才能向后检查复选框（使用 prevUntil 和 prevAll）

Answer 2

如果您的内容是动态创建的，您可以向分组元素添加自定义属性，例如data-group="6000"，您可以执行以下操作：

$('[data-group]').click(function(){
$("[data-group='"+this.attr('data-group')+"']").attr('checked','checked');
});