在php中使用Ajax传递一个(动态)复选框值列表

时间:2015-02-09 04:43:02

标签: javascript php jquery ajax checkbox

这是我的代码:

<input type="text" name="text" id="text">
<input type="button" name="but" id="but" value="click" onClick="click1()">
<div id="show_result"></div>
<?php
    echo "<br><input type='checkbox' name='type' id='all' class='type' value='all' onChange='check_change()'> All<br>";
    $gp=0;
    while($gp<5)// this 5 is for example 
    //it will vary in my original code based on DB values,
    //also $gp is not a number its actually a variable in my code.
    {
        echo "<input type='checkbox' name='type' id=".$gp." class='type' value=".$gp." onChange='check_change()'>  ".$gp."<br>";
        $gp++;
    }
?>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function check_change()
{
    var a=[];
    if(document.getElementsByClassName('type')[0].checked)
    {
        $(".type").attr("checked", true);
        a[0]=document.getElementsByClassName('type')[0].value;
    }
    else
    {
        var x = document.getElementsByClassName('type');
        var i,j=0;
        for (i = 0; i < x.length; i++) {
            if(document.getElementsByClassName('type')[i].checked)
            {
                a[j]=document.getElementsByClassName('type')[i].value;
                j++;
            }
        }
    }
    display(document.getElementById('text').value,document.getElementsByClassName('type').value);
}
$(function()
{
    $(".type").attr("checked", true);
});
function click1()
{
    display(document.getElementById('text').value,document.getElementsByClassName('type').value);
}
function display(c,d) {
    $.post("s.php?c="+c+"&d="+d,{data : "some data"}, function(response){
        $("#show_result").html(response);
    });
}
</script>

我有一个文本框和一个按钮以及一个动态的复选框列表。我需要在两个事件上使用ajax调用传递文本框的值和所有选中的复选框,一个是按钮单击,另一个是onChange复选框值,并在div中打印这些值。

s.php是我使用Ajax调用的文件

S.php:

<?php
$c=$_GET['c'];
$d=[];
$d=$_GET['d'];
echo $d;
echo $c;
?>

是否可以使用数组传递这些选中的复选框值?如果是这样怎么办? 或者给我任何其他建议。

编辑:

$(function()
    {
        $(".type").attr("checked", true);
    });
    var checkedArray = array();
function check_change()
    { 
$('.type:checked').each(function() {
    checkedArray.push($(this).attr("id"));
    display(document.getElementById('text').value);
});
    }
    function click1()
    {
        display(document.getElementById('text').value);
    }
    function display(c) {
        $.post("s.php?c="+c+"&d="+checkedArray,{data : "some data"}, function(response){
   $("#show_result").html(response);
   });

    }

1 个答案:

答案 0 :(得分:1)

<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>

    <input type='text' id='txt'>
    <input type='button' id='btn1' value='click'>
    <?php
        echo "<br><input type='checkbox' name='type' id='all' class='type' value='all' onChange='$(this).check_change()'> All<br>";
        $gp=0;
        while($gp<5) 
        {
            echo "<input type='checkbox' name='type' id=".$gp." class='type' value=".$gp." onChange='$(this).check_change()'>  ".$gp."<br>";
            $gp++;
        }
    ?>

    <script>
    $(document).ready(function(){

        $.fn.check_change = function(){
            $("#btn1").trigger("click");
        }

        $("#all").click(function(){
            if($(this).prop('checked')) {
                $('.type').each(function() {
                        $(this).attr("checked","checked");
                    });
            }
            else {
                $('.type').each(function() {
                    $(this).prop("checked",false);
                });
            }
             $("#btn1").trigger("click");
        });

        $("#btn1").click(function(){
            txt = $("#txt").val();
            chechedArray = Array();
            $('.type:checked').each(function() {
            chechedArray.push($(this).attr("id"));
            });
            $.post('s.php',{txt:txt,check:chechedArray},function(data,status){
                alert('Response from server\n' + data );
            });
        });
    });
    </script>

s.php

<?php 
    if(isset($_POST['txt']))
    echo $_POST['txt'];
    if(isset($_POST['check']))
    print_r($_POST['check']);
?>