如何通過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元素，你的情況爲代碼在循環中運行，並您正在分配編號

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

所有複選框將具有相同的ID。現在，一旦你嘗試通過選擇

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

得到檢查狀態，如果只選擇第一個複選框，它將返回true，而忽略所有其他實例。

您應該使用類選擇器和遍歷元素來獲取逗號分隔值並進行ajax調用。

首先改變ID類在HTML <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); 

      } 
     }); 

    } 
}); 

});