如何使用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更改為類<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);

            }
        });

    }
});

});