Wybierz pierwsze 5 pole z tabeli, klikając na przycisk

Question

Mam tabeli, który wygląda tak:

<table id="start" class="appplytblclr"> 
    <tr class="heading"> 
     <td>First coumn</td> 
     <td>second column</td> 
     <td>3rd column</td> 
     <td>4th column</td> 
     <tr> 
      <tr id='1'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
      <tr id='2'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
      <tr id='3'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
      <tr id='4'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
      <tr id='5'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
      <tr id='6'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
      <tr id='7'> 
       <td> 
        <input type="checkbox" offval="no" value="&nbsp;"> 
       </td> 
       <td>s</td> 
       <td>t</td> 
       <td>f</td> 
      </tr> 
    </tr> 
</table> 

Mam przycisk, który, po kliknięciu, należy wybrać pierwsze pięć pól wyboru. Oto, co próbowałem do tej pory:

$('#clickbtn').on('click', function (e) { 
    var sList = ""; 
    $('input[type=checkbox]').each(function() { 
     sList += $(this).val() + ","; 
    }); 
    var comma = sList.split(",", 5); 
}); 

, ale wydaje się nie działać. Jak powinienem podejść do tego problemu?

Answer 1

można użyć :lt() selektora:

$("#selectFirstFive").on("click", function() { 
 
    var checkBoxes = $("#start tr td :checkbox:lt(5)");//using :lt get first 5 checkboxes 
 
    $(checkBoxes).prop("checked", !checkBoxes.prop("checked"));//change checkbox status based on check/uncheck 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="start" class="appplytblclr"> 
 
    <tr class="heading"> 
 
    <td>First coumn</td> 
 
    <td>second column</td> 
 
    <td>3rd column</td> 
 
    <td>4th column</td> 
 
    <tr> 
 
     <tr id='1'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
     <tr id='2'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
     <tr id='3'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
     <tr id='4'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
     <tr id='5'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
     <tr id='6'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
     <tr id='7'> 
 
     <td> 
 
      <input type="checkbox" offval="no" value="&nbsp;"> 
 
     </td> 
 
     <td>s</td> 
 
     <td>t</td> 
 
     <td>f</td> 
 
     </tr> 
 
</table> 
 

 
<input type="button" id="selectFirstFive" value="select" />

Answer 2

Można użyć lt na to (nie zapomnieć o selektora :checkbox zbyt):

$(":checkbox:lt(5)") 

Lub jeśli wydajność jest twoje zmartwienie (i pracujesz z dużymi listach), można użyć dużo bardziej wydajny JavaScript na slice na to:

$(':checkbox').slice(0, 5)