Обновление нескольких флажков с javascript и ajax

Question

Я работаю с несколькими флажками с javascript и ajax. При щелчке по галочке javascript отправляет с ajax значения в trata.php (эти значения: checked if is true или false и id этого флажка) ... но идентификатор всегда показывает мне undefined .... можете ли вы направлять Я пожалуйста.

Вот это JS:

$("div.feature").click(function() { 
    var checked = $(this).is(':checked'); 
    var Id = $(this).attr('id'); 
    var data = "Cara=" + checked + "&Id=" + Id; 
    $.ajax({ 
     type: "POST", 
     url: "trata.php?ts=" + new Date().getTime(), 
     data: data, 
     cache: false, 
     beforeSend: function() { 
      $("#tr").show(); 
      $("#t").empty(); 
     }, 
     success: function(response) { 
      $("#tr").hide(); 
      $("#t").append(response); 
     } 
    }) 
    return false; 
}); 

$("div.feature1").click(function() { 
    var checked = $(this).is(':checked'); 
    var Id = $(this).attr('id'); 
    var data = "Pieza=" + checked + "&Id=" + Id; 
    $.ajax({ 
     type: "POST", 
     url: "trata.php?ts=" + new Date().getTime(), 
     data: data, 
     cache: false, 
     beforeSend: function() { 
      $("#tr").show(); 
      $("#t").empty(); 
     }, 
     success: function(response) { 
      $("#tr").hide(); 
      $("#t").append(response); 
     } 
    }) 
    return false; 
}); 

В странице это код:

<table> 
    <tr> 
     <td> 
      <div class="feature" align="center"> 
       <input type="text" value="<?php echo $row['Id'] ?>" name="Id" id="Id" /> <!-- in this Id the value is 1 --> 
       <input type="checkbox" data-no-uniform="true" class="iphone-toggle" <?php if ($row[ 'Cara']=='1') {echo 'name="Cara" value="on" checked="checked"';} else { echo 'name="Cara" value="off"'; } ?>> 
      </div> 
      <div id="tr" style="display:none;" align="center"><img src="img/ajax-loaders/ajax-loader-1.gif" /> 
      </div> 
      <div id="t"></div> 
     </td> 
     <td> 
      <div class="feature1" align="center"> 
       <input type="text" value="<?php echo $row['Id']; ?>" name="Id" id="Id" /> <!-- in this Id the value is 2 --> 
       <input type="checkbox" data-no-uniform="true" class="iphone-toggle" <?php if ($row[ 'Pieza']=='1') {echo 'name="Pieza" value="on" checked="checked"';} else { echo 'name="Pieza" value="off"'; } ?>> 
      </div> 
      <div id="tr" style="display:none;" align="center"><img src="img/ajax-loaders/ajax-loader-1.gif" /> 
      </div> 
      <div id="t"></div> 
     </td> 
    </tr> 
</table> 

В trata.php // MySQL + PDO

<?php 
include('conn.php'); 
if(isset($_POST['Cara'])) { 
    try{ 
     $Id = $_POST['Id']; 
    if ($_POST['Cara'] == false) { 
     global $Cara; 
     $Cara = 0; 
    } else if ($_POST['Cara'] == true) { 
     global $Cara; 
     $Cara = 1; 
    }; 
     $sql = "UPDATE Trata SET 
     Cara = :Cara 
     WHERE Id= :Id"; 
     $stmt = $conn->prepare($sql); 
     $stmt->bindParam(':Cara', $Cara, PDO::PARAM_STR); 
     $stmt->bindParam(':Id', $Id, PDO::PARAM_INT); 
     $stmt->execute(); 
     echo "<div class='alert alert-block alert-primary fade in'> 
       <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button> 
       ok. 
      </div>"; 
    }catch(PDOException $exception){ 
     echo "Error: " . $exception->getMessage(); 
    } 
} if(isset($_POST['Pieza'])) { 
    try{ 
     $Id = $_POST['Id']; 
    if ($_POST['Pieza'] == false) { 
     global $Pieza; 
     $Pieza = 0; 
    } else if ($_POST['Pieza'] == true) { 
     global $Pieza; 
     $Pieza = 1; 
    }; 
     $sql = "UPDATE Trata SET 
     Pieza = :Pieza 
     WHERE Id= :Id"; 
     $stmt = $conn->prepare($sql); 
     $stmt->bindParam(':Pieza', $Pieza, PDO::PARAM_STR); 
     $stmt->bindParam(':Id', $Id, PDO::PARAM_INT); 
     $stmt->execute(); 
     echo "<div class='alert alert-block alert-primary fade in'> 
       <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button> 
       ok. 
      </div>"; 
    }catch(PDOException $exception){ 
     echo "Error: " . $exception->getMessage(); 
    } 
} 
$dbh = null; 
?> 

Другое дело loading ajax показывает мне только в первом td, и у меня есть 8 td-файлов.

Answer 1

div.feature и div.feature1 не имеют идентификаторов. Вот почему $ (this) .attr ('id') возвращает undefined. Попробуйте следующее:

$('div.feature input:checkbox').click(function(){ 
    var Id = $(this).attr('id'); 
});