ajax javascript复选框更改无法正常工作

时间:2013-11-06 19:59:15

标签: java javascript php ajax jquery

如果选中复选框,我使用以下ajax javascript传递值,我面临的问题是它只适用于mysql fetch aray的第一行,其余的结果总是如此结果发送checkboxstatus = 1,无论是否检查chekbox。这是代码:

<script>
 $(document).ready(function(e) {
   $('input[name=status]').change(function(){
    if( $('input[name=status]').prop('checked') )
       {checkboxstatus = '1';}
       else
       {checkboxstatus = '0';}
        var idm = $(this).attr('idm');
        $.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {"checkboxstatus": checkboxstatus,
        "idm":idm 
       },
        })        
        .fail(function(jqXHR, textStatus, errorThrown){alert(jqXHR+"--"+textStatus+"--"+errorThrown);});
    });//end change
  });//end ready
</script>

通常在第一次sql fetch中检查所有checkgox,如果我将其POST为0的checbox作为值,但对于其余的sql fetch结果,它总是发送“1”作为POST结果,无论是否检查。

这是显示复选框的代码:<?php echo "<input type='checkbox' idm='$idm' name='status'"; if($row['status'] == 1){print "checked='checked'"; }echo "/>";?>

复选框状态的可视化工作正在进行,但更改并非如此。

这是它的SQL查询:

$sql = "SELECT * FROM cursos ORDER BY id DESC";
if (!$result = mysqli_query($con,$sql))
{
    die("Error: " . mysqli_error($con));
}


<?php

while($row = mysqli_fetch_array($result))
{   
    $idm = $row['id'];
?>

<td align="center"><?php echo "<input type='checkbox' idm='$idm' name='status'"; if($row['status'] == 1){print "checked='checked'"; }echo "/>";?></td>

2 个答案:

答案 0 :(得分:1)

请试试这个,

  $(document).ready(function(e) {
     $('.CheckBoxClass').click(function(){  // added class based event  
           if( $(this).is(':checked')) {
               checkboxstatus = '1';
             } else {
               checkboxstatus = '0';
              }             
             var idm = $(this).attr('idm');
                 $.ajax({
                     type: "POST",
                     url: "checkboxtestbackend.php",
                     data: {"checkboxstatus": checkboxstatus,
                        "idm":idm 
                        },
                 })        
             .fail(function(jqXHR, textStatus, errorThrown){alert(jqXHR+"--"+textStatus+"--"+errorThrown);});
            });//end click
     });//end ready

在PHP代码中,添加了class ='CheckBoxClass'

<?php   
    echo "<input type='checkbox' idm='$idm' class='CheckBoxClass' name='status'"; if($row['status'] == 1){ print "checked='checked'"; }echo "/>";
?>

答案 1 :(得分:0)

这对我有用......

我将$('input[name=status]').prop('checked')更改为$(this).prop('checked')

<input type="checkbox" idm="stuff" name="status" value="1">
<input type="checkbox" idm="stuff" name="status" value="2">
<input type="checkbox" idm="stuff" name="status" value="3">  

<script>
 $(document).ready(function(e) {
$('input[name=status]').change(function(){
    if( $(this).prop('checked') ) {checkboxstatus = '1';}
                             else {checkboxstatus = '0';}
        var idm = $(this).attr('idm'); 
        $.ajax({
           type: "POST",
           url: "checkboxtestbackend.php",
           data: {"checkboxstatus": checkboxstatus, "idm":idm },
           success: function(response){
              console.log(response);  
             }
        })        
        .fail(function(jqXHR, textStatus, errorThrown){alert(jqXHR+"--"+textStatus+"--"+errorThrown);});
});//end change
});//end ready 
</script>