时间戳

首页 > 解决方案 > 通过自定义属性选择多个复选框并获取值

javascript - 通过自定义属性选择多个复选框并获取值

问题描述

我有一个项目要学习一些东西。我有一个预订电影座位的预订系统。一切都做得很好，但是现在我想在一个复选框上放置一个自定义值，当它被选中时，我想从该属性中获取值，我想将它传递给一个 ajax 请求。这是我的代码：

<script>
$(document).ready(function (e){
    $("#frmRezerva").on('submit',(function(e){
        e.preventDefault();
         var $fields = $(this).find('input[name="scaun_film[]"]:checked');
         if (!$fields.length) {
            alert('Selectati un scaun sau mai multe!');
                return false; 
        }
        var arr=[];
             $.each($("input[name='scaun_film[]']:checked"), function(){            
                    arr.push($(this).val());
            });

             //console.log(arr)
        $("#mail-status3").hide();
        $('#rezBtn').hide();
        $('#loader-icon3').show();
        $.ajax({
            url: "rezervare.php",
            type: "POST",
            dataType:'json',
            data: {
            "arr": arr,
            "id_movie":$('input[name="id_movie"]').val(),
            "nume_film":$('input[name="nume_film"]').val(),
            "gen_film":$('input[name="nume_film"]').val(),
            "nota_film":$('input[name="nota_film"]').val(),
            "user_id":$('input[name="user_id"]').val(),
            "user_email":$('input[name="user_email"]').val(),
            "data_film":$('select[name="data_film"]').val(),
            "bilete_film":$('input[name="bilete_film"]').val(),
            "cinematograf":$('select[name="cinematograf"]').val()},             
            success: function(response){
                window.setTimeout(function(){location.reload()},2000)
            $("#mail-status3").show();
            $('#loader-icon3').hide();
            if(response.type == "error") {
                $('#rezBtn').show();
                $("#mail-status3").attr("class","alert alert-danger");               
            } else if(response.type == "message"){
                $('#rezBtn').show();
                $("#mail-status3").attr("class","alert alert-success");                          
            }
            $("#mail-status3").html(response.text);  
            },
            error: function(){} 
        });
    }));
});
</script>

这是我的 jquery，我在其中选择复选框是否被选中。我可以得到值，但我想要同样的东西，但只能来自自定义属性。我的自定义属性是 seatName ，其值来自数据库。编辑：这里的 html 是：

<?php 
                    $sqlsq = "SELECT * FROM scaune WHERE id_scaun_movie='{$_GET['id_movie']}'";
                    $resultsq = mysqli_query($conn, $sqlsq);
                    while($rs = mysqli_fetch_assoc($resultsq)){?>

<?php if($rs['ocupat'] == 1){?>
    <div class="box">
        <label>
            <input type="checkbox" value="<?=$rs['id'];?>" disabled checked><span class="label-text"></span>
        </label>
    </div>

    <?php }else{?>
        <div class="box">
            <label>
                <input type="checkbox" value="<?=$rs['id'];?>" seatName="<?=$rs['scaun'];?>" name="scaun_film[]"><span class="label-text"></span>
            </label>
        </div>
        <?php } ?>

            <?php } ?>

所以我需要做的是在mysql rezerved中选择椅子名称和椅子的id来更新，但是我没有找到解决方案来获取椅子的id和名称，当检查时我也需要超过1所以如果检查3 把椅子检查所有的名字座位。谢谢！

标签： javascriptjquerycheckbox

解决方案

在您获取其他字段的值的过程中：

"id_movie":$('input[name="id_movie"]').val()

您可能可以这样做：

"seat_name":$('input[name="seat_name"]').data('seatName'),

但是您没有显示任何页面结构/标记，所以这充其量只是一个建议。

如果您的元素看起来像这样，这将起作用：

<input type="checkbox" name="seat_name" value="something" data-seatName="5A">

使用自定义data-属性优于制作自己的属性，例如
<input type="checkbox" seatName="5A">
使用 data- 前缀更好
<input type="checkbox" data-seatName="5A">

编辑

您发布的 HTML/PHP：

<input type="checkbox" value="<?=$rs['id'];?>" seatName="<?=$rs['scaun'];?>"
       name="scaun_film[]"><span class="label-text"></span>

可以简单地重新做为：

<input type="checkbox" value="<?=$rs['id'];?>" data-seatName="<?=$rs['scaun'];?>"
       name="scaun_film[]"><span class="label-text"></span>

然后获取数据将按照我上面所说的那样工作，您可以将其添加到您在 ajax 调用中发送的数据中：

$.ajax({
        url: "rezervare.php",
        type: "POST",
        dataType:'json',
        data: {
        "arr": arr,
        "id_movie":$('input[name="id_movie"]').val(),
        "nume_film":$('input[name="nume_film"]').val(),
        "gen_film":$('input[name="nume_film"]').val(),
        "nota_film":$('input[name="nota_film"]').val(),
        "seat_name":$('input[name="seat_name"]').data('seatName'), /* ADD */
        "user_id":$('input[name="user_id"]').val(),
        /* etc. */

推荐阅读