使用 javascript 和 ajax 更新多个复选框

Question

我正在使用 javascript 和 ajax 处理多个复选框。当单击复选框时，javascript 使用 ajax 将值发送到 trata.php（这些值：检查是真还是假以及该复选框的 id）......但 id 总是显示未定义......你能指导我，请。

这里是 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;
?>

另一件事是加载 ajax 只在第一个 td 中显示，我有 8 个 td 文件..

Answer 1

div.feature 和 div.feature1 没有 id。这就是 $(this).attr('id') 返回未定义的原因。试试这个：

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