Как проверить все флажки по строкам в таблице, используя jquery?

Question

как проверить все строки в jquery? с трудом решая его здесь

он находит внутри tbody -> 2nd td -> input: checkbox

Я знаю только, как установить флажок single, $('.myCheckbox').prop('checked', true); но каждый из рядов и циклов, мне трудно. можете дать мне несколько советов?

введите описание изображения здесь

Answer 1

Найти все флажки внутри таблицы и изменить проверенный статус При нажатии флажка selectAll, который находится в первой строке.

$('#selectAll').change(function() {
  var checkboxes = $(this).closest('table').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="bs-example">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Row</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><input type="checkbox" id="selectAll" /></td>
                <td>Kent</td>
                <td>clarkkent@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td><input type="checkbox" name="select[]" /></td>
                <td>Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td><input type="checkbox" name="select[]" /></td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
             <tr>
                <td>3</td>
                <td><input type="checkbox" name="select[]" /></td>
                <td>Rtyer</td>
                <td>yuioo@mail.com</td>
            </tr>
        </tbody>
    </table>
</div>
                          

Answer 2

Вот вам go с решением

$("button").click(function() {
  $('input[type="checkbox"]').each(function() {
    $(this).prop("checked", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>
        <input type="checkbox" class"my-checkbox" />
      </td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>
        <input type="checkbox" class"my-checkbox" />
      </td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>
        <input type="checkbox" class"my-checkbox" />
      </td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td>
        <input type="checkbox" class"my-checkbox" />
      </td>
    </tr>
  </tbody>
</table>

<button>Click ME</button>

Если ваш входной флажок генерируется динамически, пожалуйста, используйте опору для проверки и снимите флажки.

Answer 3

Для проверки всех checkboxes вы можете использовать этот код:

$('button').on("click", function(){
    $("table input[type='checkbox']").each(function(){
        $(this).attr('checked', 'checked');
        //When you want to uncheck
        $(this).removeAttr('checked');
    });
    return false;
});

Надеюсь, это поможет понять концепцию.