Как при изменении select отправить выбранные checkbox?

Question

$("select").change(function(){
  // Здесь какая то магия должна быть
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><td><input type="checkbox" name="id[2]">Поле 1</td></tr>
  <tr><td><input type="checkbox" name="id[3]">Поле 2</td></tr>
  <tr><td><input type="checkbox" name="id[5]">Поле 3</td></tr>
  <tr><td><input type="checkbox" name="id[7]">Поле 4</td></tr>
  <tr><td><input type="checkbox" name="id[8]">Поле 5</td></tr>
</table>

<!-- table не получится обернуть в форму -->
<form action="index.php" method="post">
  <input type="hidden" name="ids" value="">
  <select name="action">
    <option selected>Выберите действие...</option>
    <option value="delete">Удалить</option>
  </select>
  <button type="submit">Отправить</button>
</form>

В конечном итоге хочу со стороны сервера удалить все записи по id

Answer 1

для того что бы привязать checkbox к форме нужно дать форме ID а на checkbox установить атрибут form

$("form#data select").change(function(){

    if ($('form#data').find('select').val() === 'delete') {

      // console.log($('table').find('input'))
      $('table').find('input').each(function(i, v){
        $(v).prop('checked', false)
      })

    }

    var data = $('form#data').serialize()

    $('data-test').html(data)


});

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table>
    <tr><td><input form="data" type="checkbox" name="id[2]" value="1">Поле 1</td></tr>
    <tr><td><input form="data" type="checkbox" name="id[3]" value="2">Поле 2</td></tr>
    <tr><td><input form="data" type="checkbox" name="id[5]" value="3">Поле 3</td></tr>
    <tr><td><input form="data" type="checkbox" name="id[7]" value="4">Поле 4</td></tr>
    <tr><td><input form="data" type="checkbox" name="id[8]" value="5">Поле 5</td></tr>
  </table>
  
  <!-- table не получится обернуть в форму -->
  <form id="data" action="index.php" method="post">
    <input type="hidden" name="ids" value="">
    <select name="action">
      <option selected value="default">Выберите действие...</option>
      <option value="delete">Удалить</option>
    </select>
    <button type="submit">Отправить</button>
  </form>


  <data-test>data test</data-test>

Answer 2

Вроде придумал решение, по крайней мере решает задачу

$("table input[type='checkbox']").change(function(){
  let ids = [];
  $.each($('table input[type="checkbox"]'), function(i, v){
    if($(this).is(':checked') && (parseInt($(this).val()) > 0)) ids.push(parseInt($(this).val()));
  });
  $("input[name='ids']").val(ids);
  
  console.log($("input[name='ids']").val());
});

// На сервере php
// $ids = isset($_POST['ids']) ? explode(",", $_POST['ids']) : false;
// $action = isset($_POST['action']) ? $_POST['action'] : false;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><td><input type="checkbox" name="id[]" value="2">Поле 1</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="3">Поле 2</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="5">Поле 3</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="7">Поле 4</td></tr>
  <tr><td><input type="checkbox" name="id[]" value="8">Поле 5</td></tr>
</table>

<!-- table не получится обернуть в форму -->
<form action="index.php" method="post">
  <input type="hidden" name="ids" value="">
  <select name="action">
    <option selected>Выберите действие...</option>
    <option value="delete">Удалить</option>
  </select>
  <button type="submit">Отправить</button>
</form>

БЛОГ НА HUSL

Как при изменении select отправить выбранные checkbox?

Ответы (2 шт):