Question

我使用php和ajax构建一个复选框表单，允许用户在单击提交按钮后汇总值。单击sumbit按钮时，复选框的值将使用ajax传递给php文件。

问题单击按钮时如何传递复选框的值？

    <!-------------------ajax part no problem here--------------->
   <script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","ajax-php.php?q="+str,true);
        xmlhttp.send();
    }
 } </script> <!-------------------ajax part no problem here--------------->

<form>
   <!------- problem here----------->
    <input type="checkbox" name="users"  value="1">
    <input type="checkbox" name="users"  value="2">
    <input type="checkbox" name="users"  value="3">
    <input type="checkbox" name="users"  value="4">
    <input type="checkbox" name="users"  value="5">

    <input type="button" onclick="showUser(this.value)">
    <!------- problem here----------->
</form>

<div id="txtHint"><b>RESULTS WILL BE LISED HERE...</b></div>

感谢提前

Answer 1

试试这个：

<input type="button" onclick="showUser($(\"input[name='users']:checked\").val())">

Answer 2

检查以下代码段。我添加了一个额外的代码段，以帮助您检查哪些复选框以及未选中的复选框：

function showUser(str) {
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    
    /** additional code to help **/
    var cboxes = document.getElementsByName('users[]');
    var len = cboxes.length;
    var str = '';
    for (var i=0; i<len; i++) {
        var checkOrUncheck = cboxes[i].checked ? 'checked':'unchecked';
        str += '&' + i + '=' + checkOrUncheck;
    }
    console.log(str);
    /** additional code to help ends here **/
    
    
    xmlhttp.open("GET", "ajax-php.php?q=" + str, true);
    xmlhttp.send();
}

<form>
  <!------- problem here----------->
  <input type="checkbox" name="users[]" value="1">
  <input type="checkbox" name="users[]" value="2">
  <input type="checkbox" name="users[]" value="3">
  <input type="checkbox" name="users[]" value="4">
  <input type="checkbox" name="users[]" value="5">

  <input type="button" onclick="showUser()">
  <!------- problem here----------->
</form>

<div id="txtHint"><b>RESULTS WILL BE LISED HERE...</b></div>

Answer 3

如果您愿意，只是一个建议，您不需要ajax。

    <form method="POST">
  <input type="checkbox" name="users" value="1">
  <input type="checkbox" name="users" value="2">
  <input type="checkbox" name="users" value="3">
  <input type="checkbox" name="users" value="4">
  <input type="checkbox" name="users" value="5">

  <input type="button" name="Submit">
</form>

然后你可以通过以下方式调用按钮监听器：

if(isset($_POST['Submit'])){
 echo $_POST[user];
}

然后您可以将值存储到数组中。

如何将复选框值传递给提交按钮ajax和php

3 个答案: