Question

我在页面上有10个复选框。我有一个＆＃34;检查全部＆＃34;按钮，工作完美。

我有4个提交按钮 - 2个用于删除记录，2个用于暂停记录。

表单中不包含复选框。

<button type="button" class="btn btn-small btn-warning tip suspend" data-original-title="Suspend"><span class="icon-minus icon-white"></span></button>
<button type="button" class="btn btn-small btn-danger tip delete" data-original-title="Delete"><span class="icon-remove icon-white"></span></button>

<input type="checkbox" class="checkbox" value="0" />
<input type="checkbox" class="checkbox" value="1" />
<input type="checkbox" class="checkbox" value="2" />
<input type="checkbox" class="checkbox" value="3" />
<input type="checkbox" class="checkbox" value="4" />
<input type="checkbox" class="checkbox" value="5" />
<input type="checkbox" class="checkbox" value="6" />
<input type="checkbox" class="checkbox" value="7" />
<input type="checkbox" class="checkbox" value="8" />
<input type="checkbox" class="checkbox" value="9" />

<button type="button" class="btn btn-small btn-warning tip suspend" 
data-original-title="Suspend"><span class="icon-minus icon-white"></span>
</button>

<button type="button" class="btn btn-small btn-danger tip delete" 
data-original-title="Delete"><span class="icon-remove icon-white"></span>
</button>

点击删除按钮后，我需要通过ajax将所有选中的复选框发送到delete_record.php

点击暂停按钮后，我需要通过ajax将所有选中的复选框发送到suspend_record.php

我知道我需要做一些像

这样的事情

$("button.delete").on('click', function(){
    $("input:checkbox[class=checkbox]").each(function () {

    });
});

但老实说，此时我只是在网上找到的试错代码。我宁愿有明确的答案和解释。

同样如何吐出这个并让php（PDO数据库连接）将其作为一个数组处理？

Answer 1

您的评论令人困惑，但听起来您实际上有一个来自您所说内容的表单包装器，因此没有双表单包装器是可以理解的。我也不确定这是否属于分组，这是许多人的一组，所以我将把它视为：

<强>使用Javascript：

<script>
$(document).ready(function(){
    $('.btn').on('click',function(e){
        // Stop submission
        e.preventDefault();
        // Get nearest grouping
        var getGroup    =   $(this).closest('.fwrap');
        // Select children based on type
        var checks      =   getGroup.find('input[type=checkbox]');
        // Fetches the action name
        var action      =   $(this).data('original-title');
        // Creates the ajax url
        var url         =   action.toLowerCase()+'_record.php';
        // This is our storage
        var saveData    =   {};
        // Loop through checkboxes
        $.each(checks,function(k,v) {
            // Save the data to array
            saveData[$(v).val()]    =   $(v).is(":checked");
        });
        // Store the action and data
        var sendData    =   { 
            action: action,
            data: saveData
        };
        // Do the ajax here using this data and url (from above)
        console.log(sendData);
    });
});
</script>

Html（假设这只是循环中的一组）：

<!-- I would use a wrap here for easy selection for this grouping -->
<div class="fwrap">
    <button type="button" class="btn btn-small btn-warning tip suspend" data-original-title="Suspend"><span class="icon-minus icon-white"></span></button>
    <button type="button" class="btn btn-small btn-danger tip delete" data-original-title="Delete"><span class="icon-remove icon-white"></span></button>

    <input type="checkbox" class="checkbox" value="0" />
    <input type="checkbox" class="checkbox" value="1" />
    <input type="checkbox" class="checkbox" value="2" />
    <input type="checkbox" class="checkbox" value="3" />
    <input type="checkbox" class="checkbox" value="4" />
    <input type="checkbox" class="checkbox" value="5" />
    <input type="checkbox" class="checkbox" value="6" />
    <input type="checkbox" class="checkbox" value="7" />
    <input type="checkbox" class="checkbox" value="8" />
    <input type="checkbox" class="checkbox" value="9" />

    <button type="button" class="btn btn-small btn-warning tip suspend" 
    data-original-title="Suspend"><span class="icon-minus icon-white"></span>
    </button>

    <button type="button" class="btn btn-small btn-danger tip delete" 
    data-original-title="Delete"><span class="icon-remove icon-white"></span>
    </button>
</div>

这样做的一个注意事项是，如果用户禁用javascript并提交表单，它将会产生不可预测的结果。

Answer 2

我花了很多时间才能得到这个，但我们在这里

jquery / ajax：

$(document).ready(function(){
  $('.delete').click(function(){
    var checkValues = $('input[type=checkbox]:checked').map(function(){
      return $(this).val();
    }).get();

  $.ajax({
    url: 'delete_records.php',
    type: 'post',
    data: {ids:checkValues},
    success:function(data){
    }
  });
  });
});

jquery中的第一个函数从checkbox中获取所有值，并将它们设置为变量数组 - checkValues。

第二部分将值作为数组存入php页面。

和php：

$data = $_POST['ids'];
foreach ($data as $d) {
  $query = $db->prepare("DELETE FROM sites WHERE username=:username AND id=:id");
  $query->bindValue(':username', $username);
  $query->bindValue(':id', $d);
  $query->execute();
}

将数组设置为变量$ data，然后将每个结果作为foreach循环运行。

多提交按钮多个复选框没有形式jquery ajax php提交

2 个答案: