HelloI would like to tell you that I know there are lots of solved example on stack overflow regarding the same issues.But My query is bit complex and make me sick.I have large number of table that consist of 10 rows and 9 columns.
All I want is when user check the NONE checkbox for STROKE, other checkbox unchecked from the same row.I have to do it for every row.
and if Other checkbox checked (user can check multiple either PARENT,UNCLE,OTHERS,etc.),NONE checkbox will unchecked.
Incase of query ask me.
I am trying from last 2 days for the same, but can successed in it.
Please Help me
Thanks in advance.
HEART NONE PARENT UNCLE/AUNT GRANDPARENT OTHERS
===============================================================
STROKE
ATTACK
B.P.
BLOOD NONE PARENT UNCLE/AUNT GRANDPARENT OTHERS
===============================================================
ANEMIA
IMMUNE
LUKEMIA
Use the same class for same row.In each row you can give different class name and do further same.I given you one row the sample.
$(function(){
$("input[type='checkbox']").click(function(){
if($(this).prop('checked') == true && $(this).attr('class')=='none'){
$(this).closest("tr").find("input[type='checkbox']").each(function(){
$(this).prop('checked', false);
});
$(this).prop('checked',true);
}
else{
$(this).closest("tr").find("input[type='checkbox']").each(function(){
$(this).closest('.none').prop('checked',false);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='0'>
<tr><th>HEART</th><th>NONE</th><th>PARENT</th><th>UNCLE/AUNT</th><th>GRANDPARENT</th><th>OTHERS</th><tr>
<tr><td>STROKE</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td></tr>
<tr><td>ATTACK</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td></tr>
</table>
$(".checkAll").on("change",function(){
if($(this).is(":checked"))
$(this).closest("tr").find(".check").prop('checked',true);
else
$(this).closest("tr").find(".check").prop('checked',false);
});
td:first-child{
background-color:yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tbody>
<tr>
<td><input type="checkbox" class="checkAll" />check All1</td>
<td><input type="checkbox" class="check" />check 1</td>
<td><input type="checkbox" class="check" />check 1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkAll" />check All2</td>
<td><input type="checkbox" class="check" />check 2</td>
<td><input type="checkbox" class="check"/>check 2</td>
</tr>
</tbody>
</table>
My solution was to uncheck all the closest checkboxes and recheck the clicked one. (Works with tables)
<script>
$(document).ready(function() {
$(':checkbox').on('change', function() {
$(this).closest('tr').find(':checkbox').prop('checked', false);
$(this).prop('checked', true);
});
});
</script>
This will work ;)
<div>
<input type="checkbox" name="none" value="" id="none">
<input type="checkbox" name="parent" value="" id="parent" class="otherThanNone">
<input type="checkbox" name="uncle" value="" id="uncle" class="otherThanNone">
<input type="checkbox" name="aunt" value="" id="aunt" class="otherThanNone">
</div>
<script>
$(document).ready(function(){
if($('#none').prop('checked')==false){
$('#none').click(function(){
for(var i=0; i<3; ++i){
if($('.otherThanNone').eq(i).prop('checked')==true){
$('.otherThanNone').eq(i).prop('checked', false);
}
}
});
}
$('#parent').click(function(){
$('#none').prop('checked', false);
console.log('a');
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Checkbox selection</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<th>HEART</th>
<th>NONE</th>
<th>PARENT</th>
<th>UNCLE/AUNT</th>
<th>GRANDPARENT</th>
<th>OTHERS</th>
</tr>
<tr>
<td>STROKE</td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="none"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="others"></td>
</tr>
<tr>
<td>ATTACK</td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="none"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="others"></td>
</tr>
<tr>
<td>B.P.</td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="none"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="others"></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).on('click','.Strokeclass',function(){
var js_class = $(this).parent().attr('class');
var js_slected = $(this).attr('name');
if(js_slected == 'none')
{
$( '.'+js_class ).each(function( ) {
if($(this).children().attr('name') != 'none')
{$(this).children().prop('checked', false);}
});
}
else if(js_slected == 'others')
{
$( '.'+js_class ).each(function( ) {
if($(this).children().attr('name') == 'none')
{$(this).children().prop('checked', false);}
});
}
});
</script>
</html>
$(".checkAll").on("change",function(){
if($(this).is(":checked"))
$(this).closest("tr").find(".check").prop('checked',true);
else
$(this).closest("tr").find(".check").prop('checked',false);
});
td:first-child{
background-color:yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tbody>
<tr>
<td><input type="checkbox" class="checkAll" />check All1</td>
<td><input type="checkbox" class="check" />check 1</td>
<td><input type="checkbox" class="check" />check 1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkAll" />check All2</td>
<td><input type="checkbox" class="check" />check 2</td>
<td><input type="checkbox" class="check"/>check 2</td>
</tr>
</tbody>
</table>
Related
This code produced to do 2 things. First one is to highlight table record when checkbox is clicked. Second one is to remeber the result even page is refreshed.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
.highlight-red {
background-color: red;
}
.highlight-green {
background-color: green;
}
.highlight-yellow {
background-color: yellow;
}
</style>
<div class="col-lg-10">
<table id="Table" border="1" >
<tr class="highlight">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
<td>Click me</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function changeSoma(data, color){
if(data.checked && color == 'red'){
$(data).parent().parent().addClass("highlight-red");
}
else{
$(data).parent().parent().removeClass("highlight-red");
}
if(data.checked && color == 'green'){
$(data).parent().parent().addClass("highlight-green");
}
else{
$(data).parent().parent().removeClass("highlight-green");
}
if(data.checked && color == 'yellow'){
$(data).parent().parent().addClass("highlight-yellow");
}
else{
$(data).parent().parent().removeClass("highlight-yellow");
}
}
</script>
<script>
var cond = JSON.parse(localStorage.getItem("check"));
for(var i in cond) {
if(cond[i]) {
$("#"+i).attr("checked",true);
$("#"+i).parent().parent().addClass("highlight-"+cond[i]);
}
}
function changeSoma(data, color){
var state;
if(localStorage.getItem("check") == null) {
state = {cb1:0,cb2:0,cb3:0};
} else{
state = JSON.parse(localStorage.getItem("check"));
}
if(data.checked) {
$(data).parent().parent().addClass("highlight-"+color);
state[data.id]= color;
} else {
$(data).parent().parent().removeClass("highlight-"+color);
state[data.id]= 0;
}
localStorage.setItem("check",JSON.stringify(state));
}
</script>
</body>
</html>
But I need three checkboxes to be horizontal. When I remove tr tags, only one colors highlight all three check boxes, Other 2 colors doesn't work.It is shown below. How Can I change this? Ca anybody explain me where is my bug?
just add this to your tr tag. No need for deleting it.
style="display: inline-block;"
Should look like this
<tr style="display: inline-block;">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
<td>Click me</td>
</tr>
function changeSoma(data, color) {
if (data.checked)
$(data).parent().addClass(`highlight-${color}`);
else
$(data).parent().removeClass(`highlight-${color}`);
}
.highlight-red {
background-color: red;
}
.highlight-green {
background-color: green;
}
.highlight-yellow {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-10">
<table id="Table" border="1">
<tr class="highlight">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')"/></td>
<td>Click me</td>
<td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
<td>Click me</td>
<td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
<td>Click me</td>
</tr>
</table>
</div>
Almost the same as above, but targets the text td rather than the checkboxes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-10">
<table id="Table" border="1">
<tr class="highlight">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
<td class="red">Click me</td>
<td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
<td class="green">Click me</td>
<td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
<td class="yellow">Click me</td>
</tr>
</table>
</div>
<script>
function changeSoma(data, color) {
if (data.checked)
$("." + color + "").addClass(`highlight-${color}`);
else
$("." + color + "").removeClass(`highlight-${color}`);
}
</script>
You could wrap all your <td> elements into a single <tr> so they'd all appear in a single row. I'd also suggest to wrap your text into a <label> so you can identify your <label> and the corresponding <input> in order to just style their parent <td> elements.
HTML
<div class="col-lg-10">
<table id="Table" border="1">
<tr class="highlight">
<td>
<input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" />
</td>
<td>Click me</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" />
</td>
<td>Click me</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" />
</td>
<td>Click me</td>
</tr>
</table>
</div>
JS (only your if block)
if (data.checked) {
$(data).parent().parent().addClass("highlight-" + color);
state[data.id] = color;
} else {
$(data).parent().parent().removeClass("highlight-" + color);
state[data.id] = 0;
}
localStorage.setItem("check", JSON.stringify(state));
}
Live demo
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>
So i have a table and some check boxes at the moment:
https://jsfiddle.net/1o7phmkL/
I am trying to change the background color of each "cell" depending on what check boxes are selected. For example if the user is to select the Monday and Saturday check box the monday and saturday cells in the table will get a background colour of red, and only the ones that have a number in.
<form action="" method="get">
<input type="checkbox" name="Monday" value="Monday">Monday<br>
<input type="checkbox" name="Tuesday" value="Tuesday">Tuesday<br>
<input type="checkbox" name="Wednesday" value="Wednesday">Wednesday<br>
<input type="checkbox" name="Thursday" value="Thursday">Thursday<br>
<input type="checkbox" name="Friday" value="Friday">Friday<br>
<input type="checkbox" name="Saturday" value="Saturday">Saturday<br>
<input type="checkbox" name="Sunday" value="Sunday">Sunday<br>
</form>
I have look across the web for an example of how this can work but i can only find example using javascript whereby the "closest" td is changed.
Thanks in advance.
Try this: <script>var boxes = document.getElementsByTagName("input")
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].checked) {boxes[i].style.backgroundColor = "red";}}</script>
add following code to js and try
$(document).on("click",':checkbox',function(){
var val= $(this).val();
val=val.substring(0, 3);
if(this.checked){
selected_Index = $('th:contains("'+val+'")').index()+1;
//console.log(ownerIndex);
$('table tr td:nth-child('+selected_Index+')').css("background","#36ac3b");
}
else
{
$('table tr td:nth-child('+selected_Index+')').css("background","initial");
}
});
See fiddle:
https://jsfiddle.net/1o7phmkL/1/
Below code may help you to find your answer
$(document).ready(function(e) {
$('input[type=checkbox]').change(function() {
var columnNo = $(this).val();
if ($(this).is(':checked')) {
$('table tr td:nth-child('+columnNo+')').each(function(index, element) {
if($(this).html()!= ' ') $(this).css("background-color","#F00");
});
} else {
$('table tr td:nth-child('+columnNo+')').each(function(index, element) {
if($(this).html()!= ' ') $(this).css("background-color","#FFF");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="get">
<input id="1" type="checkbox" name="Monday" value="2">Monday<br>
<input id="2" type="checkbox" name="Tuesday" value="3">Tuesday<br>
<input id="3" type="checkbox" name="Wednesday" value="4">Wednesday<br>
<input id="4" type="checkbox" name="Thursday" value="5">Thursday<br>
<input id="5" type="checkbox" name="Friday" value="6">Friday<br>
<input id="6" type="checkbox" name="Saturday" value="7">Saturday<br>
<input id="0" type="checkbox" name="Sunday" value="1">Sunday<br>
</form>
<table border=1 cellpadding=2 class="calander" >
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td> <td> <td>1 <td>2 <td>3
</tr>
<tr>
<td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10
</tr>
<tr>
<td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17
</tr>
<tr>
<td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24
</tr>
<tr>
<td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>
</tr>
</table>
<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);
})
});
// 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 />