Question

我有一个包含50行的html表，每行包含一个复选框。我需要通过单击按钮使用jquery在表格中选择前五个复选框。

<table>
  <tr class="asd"><td><input type='checkbox'></td></tr>
  <tr class="asd"><td><input type='checkbox'></td></tr>
  <tr class="asd"><td><input type='checkbox'></td></tr>
  <tr class="asd"><td><input type='checkbox'></td></tr>
</table>

Answer 1

您可以使用:lt()选择器访问前5个复选框，如下所示：

$("button").click(function () {
    $("table tr :checkbox:lt(5)").prop("checked", true);
})

table {
   float: left;
    width:100%;
    text-align: left;
    border: 1px solid #FFB76D;
}
caption span {
    border:1px solid #FFB76D;
    text-align: center;
    font-weight: bold;
    display:block;
    font-size:14px;
    color: #222222;
    background: #FFB76D;
    padding:5px 0px;
}
tr td {
    background-color: #FFF;
    color: #555555;
    height: 40px;
    border-bottom: 1px solid #FFB76D;
    vertical-align: middle;
    padding: 0 0 0 10px;"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="5" class="content_data sticky-enabled tableheader-processed sticky-table">
    <caption><span>testing</span>

    </caption>
    <thead></thead>
    <tbody>
        <tr class="odd">
            <td>
                <input type="checkbox" value="7491874" class="row_id_checkbox" name="empid" />
            </td>
            <td>7491874</td>
            <td>Amir Moinfar MD</td>
            <td>36</td>
            <td>Thank you</td>
            <td>09/15/2014</td>
            <td>Q</td>
            <td><a href=""><span class="row_goto_btn"></span></a>
            </td>
        </tr>
        <tr class="even">
            <td>
                <input type="checkbox" value="7491874" class="row_id_checkbox" name="empid" />
            </td>
            <td>7491874</td>
            <td>asdad</td>
            <td>36</td>
            <td>Thank you</td>
            <td>09/15/2014</td>
            <td>Q</td>
            <td><a href=""><span class="row_goto_btn"></span></a>
            </td>
        </tr>
        <tr class="odd">
            <td>
                <input type="checkbox" value="7491874" class="row_id_checkbox" name="empid" />
            </td>
            <td>7491874</td>
            <td>Amir Moinfar MD</td>
            <td>36</td>
            <td>Thank you</td>
            <td>09/15/2014</td>
            <td>Q</td>
            <td><a href=""><span class="row_goto_btn"></span></a>
            </td>
        </tr>
        <tr class="even">
            <td>
                <input type="checkbox" value="7491874" class="row_id_checkbox" name="empid" />
            </td>
            <td>7491874</td>
            <td>asdad</td>
            <td>36</td>
            <td>Thank you</td>
            <td>09/15/2014</td>
            <td>Q</td>
            <td><a href=""><span class="row_goto_btn"></span></a>
            </td>
        </tr>
        <tr class="odd">
            <td>
                <input type="checkbox" value="7491874" class="row_id_checkbox" name="empid" />
            </td>
            <td>7491874</td>
            <td>Amir Moinfar MD</td>
            <td>36</td>
            <td>Thank you</td>
            <td>09/15/2014</td>
            <td>Q</td>
            <td><a href=""><span class="row_goto_btn"></span></a>

            </td>
        </tr>
         <tr class="even">
            <td>
                <input type="checkbox" value="7491874" class="row_id_checkbox" name="empid" />
            </td>
            <td>7491874</td>
            <td>asdad</td>
            <td>36</td>
            <td>Thank you</td>
            <td>09/15/2014</td>
            <td>Q</td>
            <td><a href=""><span class="row_goto_btn"></span></a>

            </td>
        </tr>
    </tbody>
</table>
<button>select 5</button>

Answer 2

如何解决的一个小例子：

 var elemens =     $( "table input:checkbox" );

 for(var i = 0 ; i <5; i++){
 //do your logic
 }

Answer 3

这是Example

$(function() {
    $("table input[type=checkbox]").slice(0,5).prop('checked', true);
});

Answer 4

您可以使用 lt （小于）修饰符。

$('#table input[type="checkbox"]:lt(5)').prop('checked', true);

这里是JSBin：http://jsbin.com/gacebekuhebu/2/edit

使用第一次未保存的更改更新了JSBin。按＆＃34;用JS运行＆＃34;然后按下按钮。

使用jQuery选择表中的前五个复选框

4 个答案: