I have created a HTML form with checkbox like this, but I am struggle to turn them into two dimensional
<input type="checkbox" id="orange" name="fruit1" value="orange">
<input type="checkbox" id="banana" name="fruit2" value="banana">
<input type="checkbox" id="apple" name="fruit3" value="apple">
<input type="checkbox" id="pear" name="fruit4" value="pear">
<input type="checkbox" id="ripe" name="feature1" value="ripe">
<input type="checkbox" id="price" name="feature2" value="price">
<input type="checkbox" id="quantity" name="feature3" value="quantity">
<input type="checkbox" id="cost" name="feature4" value="cost">
What I want is something like this
orange
banana
apple
pear
ripe
Tick
price
Tick
Tick
Tick
quantity
Tick
Tick
cost
Tick
Any method to achieve this?
You can build an table like below
<form method="POST">
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
<th>orange</th>
<th>banana</th>
<th>apple</th>
<th>pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" name="matrix[ripe][]" value="orange"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="banana"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="apple"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="pear"></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" name="matrix[price][]" value="orange"></td>
<td><input type="checkbox" name="matrix[price][]" value="banana"></td>
<td><input type="checkbox" name="matrix[price][]" value="apple"></td>
<td><input type="checkbox" name="matrix[price][]" value="pear"></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" name="matrix[quantity][]" value="orange"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="banana"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="apple"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="pear"></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" name="matrix[cost][]" value="orange"></td>
<td><input type="checkbox" name="matrix[cost][]" value="banana"></td>
<td><input type="checkbox" name="matrix[cost][]" value="apple"></td>
<td><input type="checkbox" name="matrix[cost][]" value="pear"></td>
</tr>
</tbody>
</table>
<button type="submit">sub</button>
</form>
if you submit form like below
Output of the form like below
Updated :if you are using Laravel
#php
$fruits=[
'orange',
'banana',
'apple',
'pear'
];
$features=['ripe','price','quantity','cost'];
#endphp
<form method="POST">
#csrf
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
#foreach($fruits as $fruit)
<th>{{$fruit}}</th>
#endforeach
</tr>
</thead>
<tbody>
#foreach($features as $value)
<tr>
<td>{{$value}}</td>
#foreach($fruits as $fruit)
<td><input type="checkbox" name="matrix[{{$value}}][]" value="{{$fruit}}"></td>
#endforeach
</tr>
#endforeach
</tbody>
</table>
<button type="submit">sub</button>
</form>
using jquery
<div id="dynamic-content"></div>
<script>
let fruits=[
'orange',
'banana',
'apple',
'pear'
];
let features=['ripe','price','quantity','cost'];
$.each(features , function(index, val) {
console.log(index, val)
});
let html=`<table class="table table-bordered ">
<thead>
<tr>
<th></th>`;
$.each(features , function(index, val) {
html += ` <tr>
<td>${val}</td>`;
$.each(fruits, function (index, val) {
html += `<td><input type="checkbox" name="matrix[${val}][]" value="${val}"></td>`;
})
})
html+=`</tr></tbody>
</table>`;
$('#dynamic-content').html(html)
</script>
I don't fully understand what you want to do. Maybe this works?
<table>
<thead>
<tr>
<th></th>
<th>Orange</th>
<th>Banana</th>
<th>Apple</th>
<th>Pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" id="orange_ripe" /></td>
<td><input type="checkbox" id="Banana_ripe" /></td>
<td><input type="checkbox" id="Apple_ripe" /></td>
<td><input type="checkbox" id="Pear_ripe" /></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" id="orange_price" /></td>
<td><input type="checkbox" id="Banana_price" /></td>
<td><input type="checkbox" id="Apple_price" /></td>
<td><input type="checkbox" id="Pear_price" /></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" id="orange_quantity" /></td>
<td><input type="checkbox" id="Banana_quantity" /></td>
<td><input type="checkbox" id="Apple_quantity" /></td>
<td><input type="checkbox" id="Pear_quantity" /></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" id="orange_cost" /></td>
<td><input type="checkbox" id="Banana_cost" /></td>
<td><input type="checkbox" id="Apple_cost" /></td>
<td><input type="checkbox" id="Pear_cost" /></td>
</tr>
</tbody>
</table>
One way would be to build a table and input in every cell a inputfield with the value x/y.
Related
Here is my code:
$(".all_checkboxes").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
My question is almost clear in the fiddle above. As you can see, currently all checkboxes will be selected in both sections. All I need to do is define a scope for jQuery selector. How can I do that?
$('input:checkbox') will search for all the checkboxes. You will have to navigate to closest table and search checkboxes in it.
$(".all_checkboxes").click(function () {
$(this)
.closest('table')
.find('input:checkbox')
.not(this)
.prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
If you want with in table. Use closest() to get the checkbox with in table
Use change event instead of click.
$(".all_checkboxes").change(function () {
$(this).closest('table').find(':checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
Looks like this is going to be a repeated action so you should consider having a faster solution than the ones available with jQuery.
Also your markup is not very well prepared for these kinds of actions. If updating the markup is an option. You can go as follows:
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="names" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="section" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>547498</td>
</tr>
</table>
Native JS version (fastest performance):
function checkAllHandler(e){
var state = this.checked;
Array.prototype.forEach.call(
document.querySelectorAll("[data-rel=" + this.dataset.checkall+"]"),
function(x){
x.checked = state;
}
)
}
Array.prototype.forEach.call(document.querySelectorAll(".all_checkboxes"), function(x){
x.addEventListener("click", checkAllHandler);
})
Codepen: https://codepen.io/Mchaov/pen/vexprr?editors=1010
this might be a stupid question but I need to get values of checked checkboxes of a specific row.
<form method="POST" action="flight_cart.php">
<table>
<tr id=1>
<td><input id="foodType" type="checkbox" value="Burger">Burger</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr id=2>
<td><input id="foodType" type="checkbox" value="Sandwich">Sandwich</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr id=3>
<td><input id="foodType" type="checkbox" value="Sub">Sub</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr><td><button type="submit">Add to Order</td></tr>
</table>
</form>
So basically, I want users to be able to pick for example: Burger with jalapeno, Sandwich with jalapeno, mustard, and chili, and sub with chili only. And storing them into an array so I can pass it to cart page. Thank you in advance!
use code
$("tr[id='1']").find("input[type='checkbox']:checked")
Just add some id to form,
var choices=[];
$("#formId input:checkbox:checked").each(function() {
choices.push($(this)[0].value);
});
and you will get array of all selected checkboxes in form.
Try this, it might be what you are looking for or it should give you a good idea about how to solve your problem
Note: It is not good practice to have multiple elements with the same Id. Use class for that
This example also checks that you have selected a foodtype before it pushes the data into the array.
$("table button").click(function(e) {
e.preventDefault()
var food = [];
$("table tr").each(function() {
if ($(this).find(".foodType").prop("checked") == true) {
var values = $(this).find('input:checkbox:checked').map(function() {
return this.value;
}).get();
food.push(values)
}
})
console.log(food)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="">
<table>
<tr id=1>
<td><input class="foodType" type="checkbox" value="Burger">Burger</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr id=2>
<td><input class="foodType" type="checkbox" value="Sandwich">Sandwich</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr id=3>
<td><input class="foodType" type="checkbox" value="Sub">Sub</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr>
<td><button type="submit">Add to Order</td></tr>
</table>
</form>
<table class="table borderless">
<thead>
<tr>
<th>Rank</th>
<th>+/-</th>
<th>Searches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
<td><input type="checkbox" > Up</td>
<td><input type="checkbox" > Over</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
<td><input type="checkbox" > Down</td>
<td><input type="checkbox" > Under</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
<td><input type="checkbox" > No movement</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Not in top 100</td>
</tr>
</tbody>
</table>
Script:
$(document).ready(function () {
$(".custom").change(function () {
$(".custom").parent().find(".custom-selector").prop("checked", true);
})
});
What I need is a radio button that checks all the boxes when selected.
Right now nothing happens when I click the radio button. However, if I add this radio button:
<input type="radio" id="op5" value="1" name="options2" class="custom">
Then they both work. Even the initial one checks all the boxes.
What is this strange behavior? I'm missing something
EDIT: it appears the radio button must be outside the table? Can I have it inside somehow?
try:
$(".custom").closest("tbody").find(".custom-selector").prop("checked", true);
or Just:
$(".custom-selector").prop("checked", true);
Try this:
$(".custom").change(function () {
$(this).parents('tbody').find(".custom-selector:checked");
});
and some reference: https://api.jquery.com/checked-selector
eventually remove your action selector using .not(this)
Try this :
$(document).ready(function () {
$(".custom").change(function () {
$(".custom-selector").prop("checked", true);
})
});
So, i have a form as below.I want to select all in working when the checkbox(For All Day) is selected. Is there any way i can do it through html or should i go for php or javascript?
<form>
<table>
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
You won't be able to do this with php, at least without reloading the page or making an Ajax request but this would be impractical. The best option is JavaScript; refer to this question, it solves your problem: How to implement "select all" check box in HTML?
Basically, all you have to do is bind an onClick event on the checkbox "All days" that triggers the JavaScript function. The function then takes the list of checkboxes, iterates through all of them, and checks them. The html (taken from the link I provided) should be similar to this:
<input type="checkbox" onClick="toggle(this)" />All days<br/>
And then the script:
function toggle(source) {
checkboxes = document.getElementsByName('x');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
The easiest method would be to use a javascript function that would be called upon the All Day check box value changed.
Then your function would be IF checked, run through the list and check all days
Try This Using jquery
Live Demo Here
Script
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
Snippet Example Below
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work" /></td>
<td>
<input type="radio" name="fday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work" /></td>
<td>
<input type="radio" name="suday" />
</td>
</tr>
</table>
</form>
Use jQuery for checking/unchecking all week days based on checking/unchecking of "All days":
$(document).ready(function(){
$(':checkbox[name="day"]').click(function(){
if($(this).is(':checked')){
$("input:radio[value='work']").prop("checked", true);
} else {
$("input:radio[value='work']").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" colspan="0" cellpadding="0">
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
// What I want to do is allow the user to select many checkboxes. In order to make a booking the user must select atleast one seat number checkbox(this checkbox has to be one or many of the seat number checkboxes). They can also select child,wheelchair or special diet, but in order to do so, the checkbox that belongs to the corresponding seat number must be checked. If it isnt a validation or popup must occur stating that the seat number must be checked. Meaning that if a user wants to check either special diet, wheelchair or child the seat number must be checked. If the user clicks the submit button without any checkboxes selected than a validation should occur or popup stating that atleast one checkbox must be selected.THis is my current page layout
this is my 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>
In my opinion, forget about all the alerts and such, just use arrayed check box keys:
<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>
Upon submission your array will look like this:
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
)
EDIT:
Based on your clarification, you need some javascript (jQuery):
Demo:
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 />