javascript - 多提交按钮多复选框无表单jquery ajax php提交

Question

我在一个页面上有 10 个复选框。我有一个“检查全部”按钮，效果完美。

我有 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 并提交表单，将会产生不可预测的结果。