獲取多個復選框值並傳遞到jQuery中的PHP

Question

我在下面有多個復選框以添加用戶訪問權限：

每個模塊都有不同的ID。 但是現在我很困惑如何獲取復選框值，然后使用ajax更新它。

例如：

• 模塊位置，我選中創建和編輯。
• 模塊部門我僅查看

（具有相同的組ID）

我不知道如何根據模塊ID和組ID將其傳遞給Ajax並將其保存到數據庫的邏輯。

源代碼：

$.ajax(
{
    url: "loadModule.php",
    type: "POST",
    data:
    {
        groupName: $("#groupName").val()
    },
    dataType: "JSON",
    success: function (jsonStr)
    {
        var len = jsonStr.length;
        for(var i=0; i<len; i++)
        {
            var moduleID = jsonStr[i].moduleID;
            var moduleName = jsonStr[i].moduleName;
            var projectName = jsonStr[i].projectName;
            var groupID = jsonStr[i].groupID;
            var chkModule = jsonStr[i].chkModule;
            var chkEdit = jsonStr[i].chkEdit;

            var tr_str = "<tr id='"+jsonStr[i].moduleID+"'>" +
            "<td>" + projectName + "</td>" +
            "<td>" + moduleName + "</td>" +
            "<td align='center'><input type='checkbox' id='"+jsonStr[i].moduleID+"' name='chk[]' class='chk' value='CREATE'/><input type='hidden' id='groupIDInput' value='"+jsonStr[i].groupID+"'/></td>" +
            "<td align='center'><input type='checkbox' id='"+jsonStr[i].moduleID+"' name='chk[]' class='chk' value='EDIT'/></td>" +
            "<td align='center'><input type='checkbox' id='"+jsonStr[i].moduleID+"' name='chk[]' class='chk' value='VIEW'/></td>" +
            "<td align='center'><input type='checkbox' id='"+jsonStr[i].moduleID+"' name='chk[]' class='chk' value='DELETE'/></td>" +
            "</tr>";
            $('.dataShow2').show();
            $("#tData tbody").append(tr_str);
        }
}

我想要的是：

1. 使用ajax獲取復選框值
2. 將其傳遞給PHP以保存到數據庫。

JS btnUpdate

$('#btnUpdate').on('click', function()
    {
        var val = [];
        $(':checkbox:checked').each(function(i){
            val[i] = $(this).val();
        });

        var chkCreateInputValue = [];            
        $('input[name^=chkProjectInput]').each(function(){
            chkCreateInputValue.push($(this).val());
        });

        $.ajax(
        {
            url: "updateGroupAccess.php",
            type: "POST",
            data:
            {
                chk: val,
                groupIDInput: $("#groupIDInput").val(),
                chkCreateInputValue: chkCreateInputValue
            },
            dataType: "JSON",
            success: function (jsonStr)
            {
                $("#btnUpdate").attr({disabled: true, value: "Update"}).addClass('btn_inact').removeClass('btn_act');;
            }
        });
    });

和PHP

if(!empty($_POST['chk']))
            {
                foreach($_POST['chkCreateInputValue'] as $chkCreateInputValue)
                {
                    if(!in_array($chkCreateInputValue, $_POST['chk'])){
                        $del = oci_parse($c1, "DELETE FROM WA_GA_TBL_ACCESSMODULES WHERE MODULEID_FK = '$chkCreateInputValue' AND GROUPID_FK = '$groupIDInput'");
                        oci_execute($del);
                    }
                }

                foreach($_POST['chk'] as $chk)
                {
                    $qChk = oci_parse($c1, "SELECT * FROM WA_GA_TBL_ACCESSMODULES WHERE GROUPID_FK = '$groupIDInput' AND MODULEID_FK IN ('$chk')");
                    oci_execute($qChk);
                    if(oci_fetch($qChk) > 0)
                    {
                        $sql = oci_parse($c1, "UPDATE WA_GA_TBL_ACCESSMODULES SET CHKCREATE = 'Y' WHERE GROUPID_FK = '$groupIDInput' AND MODULEID_FK IN ('$chk')");
                        oci_execute($sql);
                    }
                    else
                    {
                        $date_added = date("d-M-Y H:i:s");

                        $sql = oci_parse($c1, "INSERT INTO WA_GA_TBL_ACCESSMODULES(MODULEID_FK, GROUPID_FK, DATEADDED, ADDEDBY) VALUES('$chk', '$groupIDInput', TO_DATE('$date_added', 'dd-MON-yyyy hh24:mi:ss'), '$getUserID')");
                        oci_execute($sql);
                    }
                }
            }
            else
            {

                foreach($_POST['chkCreateInputValue'] as $chkCreateInputValue)
                {
                    if(!in_array($chkCreateInputValue, $_POST['chk'])){
                        $del = oci_parse($c1, "DELETE FROM WA_GA_TBL_ACCESSMODULES WHERE GROUPID_FK = '$groupIDInput'");
                        oci_execute($del);
                    }
                }
            }

Answer 1

我真的不是很好，但是這樣的想法可能會幫助您：

<script>
var data={'CREATE':[],'EDIT':[],'VIEW':[],'EDIT':[]};
var tmp=document.getElementsByName('chk[]');
for(var i=0,j=tmp.length;i<j;i++){
    if(tmp[i].checked){
        data[tmp[i].value].push(tmp[i].id);
    }
}

$.ajax({
    url:'save.php',
    data:{'data':data},
    type:'POST',
    success:function(){
        /*Callback Function*/
    }
});
</script>

<?php
if(isset($_POST['data'])){
    if(count($_POST['data']['CREATE'])){
        /* Do Something */
    }

    if(count($_POST['data']['EDIT'])){
        /* Do Something */
    }

    if(count($_POST['data']['VIEW'])){
        /* Do Something */
    }

    if(count($_POST['data']['EDIT'])){
        /* Do Something */
    }
}
?>

Answer 2

 const allCheckboxs = document.querySelectorAll('input[type=checkbox'); let data = { read: [] ,write: [] ,edit: [] ,delete: [] } allCheckboxs.forEach(element => { element.addEventListener('click', e => { const self = e.target const className = self.className const id = self.dataset.id console.log(id) if(self.checked){ data[className].push(id) }else{ const index = data[className].indexOf(id); if (index > -1) { data[className].splice(index, 1); } } console.log(data) }) }) // Do you AWESOME AJAX magic... 

 <p> Rainbow Dash: Read <input type='checkbox' class='read' data-id='rainbowdash'/> Write <input type='checkbox' class='write' data-id='rainbowdash'/> Edit <input type='checkbox' class='edit' data-id='rainbowdash'/> Delete <input type='checkbox' class='delete' data-id='rainbowdash'/> </p> <p> Pinkie Pie: Read <input type='checkbox' class='read' data-id='pinkiepie'/> Write <input type='checkbox' class='write' data-id='pinkiepie'/> Edit <input type='checkbox' class='edit' data-id='pinkiepie'/> Delete <input type='checkbox' class='delete' data-id='pinkiepie'/> </p> <p> Flutterhsy: Read <input type='checkbox' class='read' data-id='flutterhsy'/> Write <input type='checkbox' class='write' data-id='flutterhsy'/> Edit <input type='checkbox' class='edit' data-id='flutterhsy'/> Delete <input type='checkbox' class='delete' data-id='flutterhsy'/> </p>