Javascript 如何创建仅允许用户在选中前一个复选框时选择复选框的复选框验证？_Javascript_Php_Jquery

Javascript 如何创建仅允许用户在选中前一个复选框时选择复选框的复选框验证？

javascript php jquery

Javascript 如何创建仅允许用户在选中前一个复选框时选择复选框的复选框验证？,javascript,php,jquery,Javascript,Php,Jquery,//我想做的是允许用户选择许多复选框。为了进行预订，用户必须选择至少一个座位号复选框（此复选框必须是一个或多个座位号复选框）。他们也可以选择儿童、轮椅或特殊饮食，但要做到这一点，必须选中对应座位号的复选框。如果不是，则必须进行验证或弹出，说明必须检查座位号。这意味着，如果用户想要检查特殊饮食、轮椅或儿童，则必须检查座位号。如果用户在未选中任何复选框的情况下单击“提交”按钮，则应进行验证或弹出窗口，说明至少必须选中一个复选框这是我的nextpage.php <!DOCTYPE html&g

//我想做的是允许用户选择许多复选框。为了进行预订，用户必须选择至少一个座位号复选框（此复选框必须是一个或多个座位号复选框）。他们也可以选择儿童、轮椅或特殊饮食，但要做到这一点，必须选中对应座位号的复选框。如果不是，则必须进行验证或弹出，说明必须检查座位号。这意味着，如果用户想要检查特殊饮食、轮椅或儿童，则必须检查座位号。如果用户在未选中任何复选框的情况下单击“提交”按钮，则应进行验证或弹出窗口，说明至少必须选中一个复选框

这是我的nextpage.php

<!DOCTYPE html>
<head>
<style>

td{

    padding-top: 10px; 
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
p{
font-size: 16px;

}
</style>
<body>
<?php
// Start the session
session_start();
?>

<?php

       $str = $_GET['Confirm'];
       $array = (explode(",",$str)); 
      ?>


<h1>Booking Details</h1>

Flight Details:
<table>
    <tr>
        <td> Route_no
        </td>
        <td><?php echo $array[0] ?>
        </td>
    </tr>
    <tr>
        <td>
        To_city</td>
        <td> <?php echo $array[1] ?>
        </td>
    </tr>
    <tr>
        <td>
        From_city</td>
        <td> <?php echo $array[2] ?>
        </td>
    </tr>
    <tr>
        <td>
        Price</td>
        <td> $<?php echo $array[3] ?>
        </td>
    </tr>

</table>

<?php
// Set session variables
$_SESSION["route_no"] = $array[0];
$_SESSION["to_city"] = $array[1];
$_SESSION["from_city"] = $array[2];
$_SESSION["price"] = $array[3];
echo "Session variables for this booking have been set.";
?>
<form action="Yourbookings.php" method="get">
<table>
<tr>
    <td>Seat #</td>
    <td>Child </td>
    <td>WheelChair</td>
    <td>Special Diet</td>
</tr>
<tr>
    <td>Seat 1 <input type="checkbox" name="seat1" value="2"> </td>
    <td>  <input type="checkbox" name="Child" value="Child1"> </td>
    <td>  <input type="checkbox" name="WheelChair" value="WheelChair1"> </td>
    <td>  <input type="checkbox" name="Special Diet" value="SpecialDiet1"> </td>
</tr>
<tr>
    <td>Seat 2 <input type="checkbox" name="seat2" value="1"> </td>
    <td>  <input type="checkbox" name="Child2" value="Child2"> </td>
    <td>  <input type="checkbox" name="WheelChair2" value="WheelChair2"> </td>
    <td>  <input type="checkbox" name="Special Diet2" value="SpecialDiet2"> </td>
</tr>
<tr>
    <td>Seat 3 <input type="checkbox" name="seat3" value="seat3"> </td>
    <td>  <input type="checkbox" name="Child3" value="Child3"> </td>
    <td>  <input type="checkbox" name="WheelChair3" value="WheelChair3"> </td>
    <td>  <input type="checkbox" name="Special Diet3" value="SpecialDiet3"> </td>
</tr>
<tr>
    <td>Seat 4 <input type="checkbox" name="seat4" value="seat4"> </td>
    <td>  <input type="checkbox" name="Child4" value="Child14"> </td>
    <td>  <input type="checkbox" name="WheelChair4" value="WheelChair4"> </td>
    <td>  <input type="checkbox" name="Special Diet4" value="SpecialDiet4"> </td>
</tr>
<tr>
    <td>Seat 5 <input type="checkbox" name="seat5" value="seat5"> </td>
    <td>  <input type="checkbox" name="Child5" value="Child5"> </td>
    <td>  <input type="checkbox" name="WheelChair5" value="WheelChair5"> </td>
    <td>  <input type="checkbox" name="Special Diet5" value="SpecialDiet5"> </td>
</tr>
</table>

<?php
$_SESSION["price"] = $array[3];


?>

Total = $variable??


<input type="submit" name="Add booking" value="Add_booking">
</form>



</body>
</head>
</html>


运输署{
填充顶部：10px；
左侧填充：10px；
右边填充：10px；
垫底：10px；
}
p{
字体大小：16px；
}
预订详情
航班详情：
路线号
去卢乌市
来自乌市
价格
$
座位#
小孩
轮椅
特殊饮食
座位1
座位2
座位3
座位4
座位5
总计=$variable？？

在我看来，忘记所有警报等，只需使用阵列复选框键：

    <tr>
        <td>Seat 1</td>
        <td><input type="checkbox" name="seat1[child]" value="1"></td>
        <td><input type="checkbox" name="seat1[wheelchair]" value="1"></td>
        <td><input type="checkbox" name="seat1[specialdiet]" value="1"></td>
    </tr>
    <tr>
        <td>Seat 2</td>
        <td><input type="checkbox" name="seat2[child]" value="1"></td>
        <td><input type="checkbox" name="seat2[wheelchair]" value="1"></td>
        <td><input type="checkbox" name="seat2[specialdiet]" value="1"></td>
    </tr>
    <tr>
        <td>Seat 3</td>
        <td><input type="checkbox" name="seat3[child]" value="1"></td>
        <td><input type="checkbox" name="seat3[wheelchair]" value="1"></td>
        <td><input type="checkbox" name="seat3[specialdiet]" value="1"></td>
    </tr>
    <tr>
        <td>Seat 4</td>
        <td><input type="checkbox" name="seat4[child]" value="1"></td>
        <td><input type="checkbox" name="seat4[wheelchair]" value="1"></td>
        <td><input type="checkbox" name="seat4[specialdiet]" value="1"></td>
    </tr>

编辑：

$(document).ready(function(){
    $(this).on('click',".seat_selector",function() {
        var thisBtn     =   $(this);
        var isChk       =   thisBtn.is(":checked");
        var thisWrap    =   thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
        if(isChk)
            thisWrap.attr("disabled",false);
        else {
            thisWrap.attr("disabled",true);
            thisBtn.attr("disabled",false);
        }

        var allSeats    =   $(".seat_selector");
        var disable     =   true;
        $.each(allSeats, function(k,v) {
            if($(v).is(":checked")) {
                disable = false;
                return false;
            }
        });

        $("#submitter").attr('disabled',disable);
    });
});

<table>
</tr>
    <tr class="seat_selector_wrap">
    <td>Seat 1</td>
    <td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 2</td>
    <td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 3</td>
    <td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 4</td>
    <td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />

根据您的说明，您需要一些javascript（jQuery）：

演示：

$(document).ready(function(){
    $(this).on('click',".seat_selector",function() {
        var thisBtn     =   $(this);
        var isChk       =   thisBtn.is(":checked");
        var thisWrap    =   thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
        if(isChk)
            thisWrap.attr("disabled",false);
        else {
            thisWrap.attr("disabled",true);
            thisBtn.attr("disabled",false);
        }

        var allSeats    =   $(".seat_selector");
        var disable     =   true;
        $.each(allSeats, function(k,v) {
            if($(v).is(":checked")) {
                disable = false;
                return false;
            }
        });

        $("#submitter").attr('disabled',disable);
    });
});

<table>
</tr>
    <tr class="seat_selector_wrap">
    <td>Seat 1</td>
    <td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 2</td>
    <td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 3</td>
    <td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 4</td>
    <td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />

JavaScript:

$(document).ready(function(){
    $(this).on('click',".seat_selector",function() {
        var thisBtn     =   $(this);
        var isChk       =   thisBtn.is(":checked");
        var thisWrap    =   thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
        if(isChk)
            thisWrap.attr("disabled",false);
        else {
            thisWrap.attr("disabled",true);
            thisBtn.attr("disabled",false);
        }

        var allSeats    =   $(".seat_selector");
        var disable     =   true;
        $.each(allSeats, function(k,v) {
            if($(v).is(":checked")) {
                disable = false;
                return false;
            }
        });

        $("#submitter").attr('disabled',disable);
    });
});

<table>
</tr>
    <tr class="seat_selector_wrap">
    <td>Seat 1</td>
    <td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 2</td>
    <td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 3</td>
    <td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 4</td>
    <td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />

HTML:

$(document).ready(function(){
    $(this).on('click',".seat_selector",function() {
        var thisBtn     =   $(this);
        var isChk       =   thisBtn.is(":checked");
        var thisWrap    =   thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
        if(isChk)
            thisWrap.attr("disabled",false);
        else {
            thisWrap.attr("disabled",true);
            thisBtn.attr("disabled",false);
        }

        var allSeats    =   $(".seat_selector");
        var disable     =   true;
        $.each(allSeats, function(k,v) {
            if($(v).is(":checked")) {
                disable = false;
                return false;
            }
        });

        $("#submitter").attr('disabled',disable);
    });
});

<table>
</tr>
    <tr class="seat_selector_wrap">
    <td>Seat 1</td>
    <td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 2</td>
    <td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 3</td>
    <td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
    <td>Seat 4</td>
    <td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
    <td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
    <td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />


座位1
座位2
座位3
座位4

必须进行验证这是必须的，您需要验证的目的是什么？要检查是否所有5个座位都已勾选？要确保在单击“添加\提交”按钮之前至少选中一个座位号复选框，并且为了让用户选择econ和/或firstclass和/或businessclass，请选中与这三个复选框（即同一行上的三个复选框）对应的复选框（即座位号）必须首先选中，以便用户可以选择三个复选框中的任何一个/如果您仍然不明白，请让我知道。因此，他们需要先选中一个座位，然后考虑该座位的任何特殊选项。所以他们可以有0个选项，但必须选择一个座位，对吗？对。他们也可以选择多个座位，而不仅仅是一个。