如何使用javascript将选中的复选框值传递到下一页

Question

我正在从数据库中检索值并将其显示在带有复选框的 html 表中。我也有按钮，当用户选中复选框并传递 rowid 并重定向下一页时。如果用户不选中复选框并选中该按钮不会传递rowid，也不会重定向。

我的问题是当 html 表中的第一行被选中并且按钮按下它的工作但如果我正在检查 html 表中的第二行并单击按钮它不执行任何操作

下面是我的代码

<tbody id="fbody" class="fbody" style="width:1452px" >    
<?php    

$clientid=$_GET['clientid'];  
if($clientid!=""){      
    $sql = mysql_query("SELECT * FROM billingdatainputandexport WHERE clientid =            '$clientid'");    

    while($rows=mysql_fetch_array($sql))
    {
        if($alt == 1)
        {
            echo '<tr class="alt">';
            $alt = 0;
        }
        else
        {
            echo '<tr>';
            $alt = 1;
        }

    echo '<td  style="width:118px" class="edit clientid '.$rows["id"].'">'.$rows["clientid"].'</td>
        <td id="CPH_GridView1_clientname" style="width:164px" class="edit clientname '.$rows["id"].'">'.$rows["clientname"].'</td>      
        <td id="CPH_GridView1_billingyear" style="width:168px" class="edit  billingyear '.$rows["id"].'">'.$rows["billingyear"].'</td>
        <td id="CPH_GridView1_billingmonth " style="width:169px" class="edit billingmonth '.$rows["id"].'">'.$rows["billingmonth"].'</td>
        <td style="width:167px" class=" '.$rows["id"].'">
        <input name="nochk" value=" '.$rows["id"].'" type="submit" style="margin:0 0 0 49px;background-image: url(/image/export.png);background-repeat: no-repeat;cursor:pointer;color:#C0C0C0;" ></td>
        <td style="width:69px"><input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/></td>                                 
        </tr>';   

    }
}
?>    
</tbody>

<input type="image" name="yousendit" id="yousendit" src="/image/export.png"  style="margin:-5px 23px -28px 822px;cursor:pointer;" >

javascript

<script>    
$(document).ready(function() {      
    $("#yousendit").click(function() {      
        if(document.getElementById('chk1').checked){
                var ms = document.getElementById('chk1').value;

                $.ajax({
                   type:"post",    
                   data:"ms="+ms,
                   success:function(data) {             
                        window.location = 'billingdatainputandexport/billingdatainputandexportdetailedreport.php?ms='+ms+''
                      $.post("billingdatainputandexport/billingdatainputandexportdetailedreport.php", { "test": ms } );
                          $("#result").html(data);                          
                   }
                });         
        }
    });
});    
</script>

Answer 1

你可以改变这个：

id="chk1"
name="chk1"

<input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/>

到这里：

class="chk"
name="chk"'.$rows["id"].'

'<input type="checkbox" id="chk1" name="chk"'.$rows["id"].'" value=" '.$rows["id"].'"/>'

并更新 jQuery 代码：

$("#yousendit").click(function() {
    var $check = $('.chk:checked');

    $.ajax({  //<-------------here you havn't mentioned the url
       type:"post",
       data:$check.serialize(),
       success:function(data){

           ............

       }
    });
});

Answer 2

HTML 页面应该只有 1 个具有指定 ID 的元素，在您的情况下，因为代码在循环中运行并且您正在分配 id

<td style="width:69px"><input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/></td>

所有复选框都将具有相同的 ID。现在，一旦您尝试通过选择器获取检查状态

if(document.getElementById('chk1').checked){

如果只有第一个复选框被选中并忽略所有其他实例，它将返回 true。

您应该使用类选择器并循环遍历元素以获取逗号分隔的值并进行 ajax 调用。

首先在 HTML 中将 id 更改为 class <input type="checkbox" class="chk1" name="chk1" value=" '.$rows["id"].'"/>

并更改 JavaScript 以处理选中的复选框数组

$(document).ready(function () {

$("#yousendit").click(function () {

    var id_list = [];

    $.each($(".chk1:checked"), function (index, element) {
        var tmpVal = $(element).val();
        id_list.push(tmpVal);
    });


    if (id_list.length > 0) {


        var ms = id_list.join();




        $.ajax({
            type: "post",

            data: "ms=" + ms,
            success: function (data) {

                window.location = 'billingdatainputandexport/billingdatainputandexportdetailedreport.php?ms=' + ms + ''

                $.post("billingdatainputandexport/billingdatainputandexportdetailedreport.php", {
                    "test": ms
                });
                $("#result").html(data);

            }
        });

    }
});

});