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

Question

I am retrieving value from database and showing it in html table with check boxes.i am also having button, when user check the check box and it pass the rowid and redirect next page .if user not check the check box and check the button it will not pass the rowid and it will not redirect.

my problem is when first row in html table is checked and button pressed its working but if i am checking the second row in html table and click the button it not performing any action

below is my code

<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

You can change this:

id="chk1"
name="chk1"

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

to this:

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

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

and update the jQuery code:

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

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

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

       }
    });
});