Jquery如何检查之间的复选框

Question

如何勾选Code 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复选框将自动检查，我该怎么办？ 。$（本）.closest（ 'TR'）prevUntil（ 'tr.lights'）的CSS（ '背景色'， '黑色'）;我试试prevUntil，但它突出了几乎所有上一个 $（本）.closest（ 'TR'）分组（ 'tr.lights'）的CSS（ '背景色'， '黑色'）。;这只能突出显示它是否靠近绿色行

Answer 1

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

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

Answer 2

查看工作版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＆amp; prevAll）