使用 JavaScript 和 Ajax 更新多个复选框

update multiple checkbox with javascript and ajax

本文关键字:复选框 更新 Ajax JavaScript 使用      更新时间:2023-09-26

我正在使用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>

In 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 文件。

div.feature和div.feature1没有id。 这就是为什么 $(this).attr('id') 返回 undefined。 试试这个:

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