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

时间:2016-08-23 04:50:32

标签: javascript php jquery arrays

我的代码需要一些帮助,

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

结果是:

enter image description here

这是我的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是我的想法,我想在这个文件中向您展示我的想法,而不是exacly代码。

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

2 个答案:

答案 0 :(得分: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>

需要更多的代码和文字来理解什么是无效的以及你想要实现的目标

答案 1 :(得分:0)

将您的表单更改为以下内容:

<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,请检查我编辑的答案。我没有测试过,但我认为它应该是这样的。