Selezionare primi 5 casella di controllo da una tabella facendo clic su un pulsante

Question

Ho una tabella che assomiglia a questo:

<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> 

Ho un pulsante che, al clic, dovrebbe scegliere i primi cinque caselle di controllo. Questo è quello che ho provato finora:

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

ma non sembra funzionare. Come dovrei affrontare questo problema?

Answer 1

È possibile utilizzare :lt() selettore:

$("#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

È possibile utilizzare lt per questo (non dimenticare il selettore :checkbox troppo):

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

O se la prestazione è la vostra preoccupazione (e si sta lavorando con grandi liste), è possibile utilizzare il molto più efficiente del slice JavaScript per questo:

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