javascript - 如何创建复选框验证，仅允许用户在选择了前一个复选框的情况下选择一个复选框？

//我想要做的是允许用户选择许多复选框。为了进行预订，用户必须选择至少一个座位号复选框(该复选框必须是一个或多个座位号复选框)。他们还可以选择 child 、轮椅或特殊饮食，但为此，必须选中属于相应座位号的复选框。如果不是验证，则必须弹出窗口，说明必须检查座位号。这意味着如果用户想要检查特殊饮食、轮椅或 child ，则必须检查座位号。如果用户在未选择任何复选框的情况下单击提交按钮，则应进行验证或弹出窗口，说明必须选择至少一个复选框。 THis is my current page layout

这是我的 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>

最佳答案

在我看来，忘记所有警报等，只需使用排列的复选框键即可:

    <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>

提交后，您的数组将如下所示:

Array
(
    [seat1] => Array
        (
            [child] => 1
            [wheelchair] => 1
        )

    [seat2] => Array
        (
            [wheelchair] => 1
        )

    [seat3] => Array
        (
            [wheelchair] => 1
            [specialdiet] => 1
        )

    [seat4] => Array
        (
            [child] => 1
            [wheelchair] => 1
            [specialdiet] => 1
        )

    [Add_booking] => Add_booking
)

<小时/>

编辑:

根据您的说明，您需要一些 javascript (jQuery):

演示:

https://jsfiddle.net/9e9embjt/

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);
    });
});

HTML:

<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 - 如何创建复选框验证，仅允许用户在选择了前一个复选框的情况下选择一个复选框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37095432/

javascript - 如何创建复选框验证，仅允许用户在选择了前一个复选框的情况下选择一个复选框？

上一篇：javascript - JSON 未正确发布

下一篇：javascript - AngularJS 中的数组未获取字符串值