将复选框值保存到数组并显示结果 PHP、Jquery

Question

我的代码需要一些帮助，

当我单击复选框时，我希望它发布到文件 php (check.php) 并返回数据，检查 php 将存储我单击到会话数组的数据，如果成功则返回 1，如果错误则返回 0。在索引中，它将显示如下文本：您选择：A，B，C ...

这是结果：

这是我的 HTML 代码：

<script language="JavaScript">
function chkallClick(o) {
var form = document.frmForm;
for (var i = 0; i < form.elements.length; i++) {
    if (form.elements[i].type == "checkbox" && form.elements[i].name!="chkall") {
        form.elements[i].checked = document.frmForm.chkall.checked;
    }
}
}
</script>

<form method="POST" name="frmForm" id="frmForm" enctype="multipart/form-data">
            <table>
                <tr>
                    <th width="2%"><input type="checkbox" name="chkall" onClick="chkallClick(this);"></th>
                </tr>
                <?php while ($rows = $result->fetch_assoc()) { ?>
                <tr>
                  <th><input type="checkbox" name="chk[]" value="<?php echo $rows['id'];?>"></th>
                </tr>
                <?php } ?>
            </table>
</form>

这是我的 check.php 文件

<?php
   if(success)
   {
      $_SESSION['arr']=$_POST['chk'];
      echo "1";
   }
   else
      echo "0";
?>

当我点击复选框时，它会动态发布到 check.php 并返回数据

我用过这个：Checkbox Data Dynamically Save to Database on Click，但没用。

Check.php 是我的想法，我想在这个文件中向你展示我的想法，而不是确切的代码。

我试着向你展示我的想法，希望你能理解。谢谢！

Answer 1

如果您的动态发送不起作用。尝试这个。

   <script language="JavaScript">
     function chkallClick(o) {
     var form = document.frmForm;
     for (var i = 0; i < form.elements.length; i++) {
         if (form.elements[i].type == "checkbox" && form.elements[i].name!="chkall") {
             form.elements[i].checked = document.frmForm.chkall.checked;
         }
     }
     }
     </script>
     <form method="POST" name="frmForm" id="frmForm" enctype="multipart/form-data">
            <table>
                <tr>
                    <th width="2%"><input type="checkbox" name="chkall" onClick="chkallClick(this);"></th>
                </tr>
                <?php while ($rows = $result->fetch_assoc()) { ?>
            <tr>
              <th><input type="checkbox" name="chk[]" value="<?php echo $rows['id'];?>"></th>
            </tr>
            <?php } ?>
            </table>
      </form>

      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
$("input[type='checkbox']").on('click', function(){
      $.post('check.php', $( "#frmForm" ).serialize(), function(data){
          if(data == 1){
             alert('Data was saved in db!');
          }
      });
});
</script>

需要更多的代码和文本来了解什么不起作用以及您想要实现什么

Answer 2

把你的表格改成这样：

<form method="POST" name="frmForm" id="frmForm" enctype="multipart/form-data">
        <table>
            <tr>
                <th width="2%"><input type="checkbox" name="chkall" onClick="chkallClick(this);"></th>
            </tr>
            <?php while ($rows = $result->fetch_assoc()) { ?>
            <tr>
              <th>
                 <input type="checkbox" id='chk_<?=$rows['id']?>' value="<?php echo $rows['id'];?>" onClick="triggerCheck(this)">
                 <input type="hidden" id='hid_<?=$rows['id']?>' name="chk[]" value="<?php echo $rows['id'];?>">
              </th>
            </tr>
            <?php } ?>
        </table>
</form>
<script>
    function triggerCheck(el) {
        var elId = el.id;
        var elId = elId.substring(elId.lastIndexOf("_")+1,elId.length);
        if (el.checked) {
            document.getElementById('hid_'+elId).value=1;
        } else {
            document.getElementById('hid_'+elId).value=0;
        }

        var ajaxRequest;
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {

            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(oc){
                ajaxRequest = null;
            }
        }

        if(!ajaxRequest && typeof XMLHttpRequest!=undefined)
            ajaxRequest = new XMLHttpRequest();

        var url = "check.php?";
        var arrCheck = document.getElementsByTagName("input");
        var param = "";
        for (var i = 0; i < arrCheck.length; i++) {
            var elcheck = arrCheck[i];
            if (elcheck.type == 'checkbox') {
                if (elcheck.id != null) {
                    if (elcheck.id.substring(0,3) == "chk") {
                       if (param.trim().length > 0) {
                           param += "&";
                       } 
                       if (elcheck.checked) {
                           param += "chk[]="+1;
                       } else {
                           param += "chk[]="+0;
                       }
                    }
                }
            }
        }
        if (param.trim().length > 0) {
            url = url + "?" + param;
        }
        ajaxRequest.open("GET", url);

        ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState!=4) return;

        // eval ajax response here
        var data = ajaxRequest.responseText;
        //
        try {
            eval(data);
        } catch (e) {
            console.log("Failed to eval data: " + data + " ("+e+")");
        }
    };
    ajaxRequest.send('');

</script>

如果您的意思是每次单击复选框都需要调用 PHP，请检查我编辑的答案。我没有测试过，但我认为应该是这样的。