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

时间:2019-06-11 20:30:37

标签: javascript jquery checkbox

我有一个项目来学习一些东西。 我有一个预订电影座位的预订系统。 一切都做得很好,但是现在我想在复选框上放置一个自定义值,并且选中该复选框后,我想从该属性中获取该值并将其传递给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 } ?>

所以我需要做的是选择椅子名称和该椅子的ID在mysql rezerved中进行更新,但是我没有找到一种解决方法来在检查时获取椅子的ID和名称,所以我也需要大于1,所以如果选中了3把椅子,以检查所有名字的座位。谢谢!

1 个答案:

答案 0 :(得分:0)

沿线获取其他字段的值:

"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. */