如何通过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); 

      } 
     }); 

    } 
}); 

});