How to change vertical <tr> into horizontal <tr> - javascript

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

Related

Having table <td> as checkbox, how to implement click and drag multiple selection on <td>

I do have a code which changes checkbox state when <td> is clicked
$(document).ready(function() {
$("td").click(function(e) {
var chk = $(this).closest("td").find("input:checkbox").get(0);
if (e.target != chk) {
chk.checked = !chk.checked;
if ($(this).closest("td").find("input:checkbox").prop("checked") == true) {
$(this).closest("td").css("background-color", "red");
console.log($(this).closest("td").find("input:checkbox").prop("checked"));
console.log($(this).closest("td").find("input:checkbox").prop("value"));
} else {
$(this).closest("td").css("background-color", "white");
console.log($(this).closest("label").find("input:checkbox").prop("checked"));
console.log($(this).closest("label").find("input:checkbox").prop("value"));
}
}
});
});
table,
th,
td {
border: 1px solid black;
}
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I need to implement click and drag across multiple <td> which will also check the checkboxes. I do saw this implementation, but I'm still can't get to have this work with my existing code.

your reference is very helpfull, Hopefully my snippet can help you in any ways.. have a nice day :)
$(document).ready(function() {
var isMouseDown = false,
isHighlighted;
$("#sample input:checkbox").click(function() {
return false;
})
$("#sample td:not(:first-child)")
.mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
$(this).find("input:checkbox").prop("checked", isHighlighted);
return false; // prevent text selection
})
.mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
$(this).find("input:checkbox").prop("checked", isHighlighted);
}
})
.bind("selectstart", function() {
return false;
})
$(document)
.mouseup(function() {
isMouseDown = false;
});
});
table,
th,
td {
border: 1px solid black;
}
https: //stackoverflow.com/questions/58418830/having-table-td-as-checkbox-how-to-implement-click-and-drag-multiple-selectio#
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
table td.highlighted {
background-color: #999;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

When you press mousedown we toggle a boolean to indicate that the mouse is down on. On mouseover a TD we check if the mouse is down and then check it. We prevent default behavior on mousedown to avoid text selection.
$(document).ready(function() {
// one click
$('td').on( 'click', function(){
var $checkbox = $(this).find('input:checkbox')
$checkbox.click()
if ( $checkbox[0].checked ) {
$checkbox.parent().css("background-color", "red");
} else {
$checkbox.parent().css("background-color", "white");
}
})
var mouseDown = false;
$('td').on('mousedown touchstart', function(event) {
// Disable text selection
event.preventDefault();
// set boolean
mouseDown = true;
});
$(window.document).on('mouseup touchend', function(event) {
mouseDown = false;
});
$('td').on('mouseover', function(event) {
if (mouseDown) {
var $checkbox = $(this).find('input:checkbox')
if ( !$checkbox[0].checked ) {
$checkbox.click()
}
}
});
});
table,
th,
td {
border: 1px solid black;
}
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Show/hide rest of the rows when checkbox is checked

I have a table which has a checkbox in the first column (in a <td> element) of every row. When this is checked, the rest of the columns in that row will be displayed.
I have read several articles on this topic with some great examples but can't achieve exactly what I want. I had been able to hide the rest of the <td> elements using css but not been able to make it visible.
I understand this is possible with JavaScript but I am not well versed in it. Any help is highly appreciated.
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>

Using jQuery:
$(document).ready(function() {
$("tr td:first-child :checkbox").change(function() {
var checkboxes = $(this).parent().siblings("td").children(":checkbox");
var containers = $(this).parent().siblings("td:not(first-child)");
if (this.checked) {
containers.css('visibility', 'visible');
checkboxes.prop("checked", true);
} else {
containers.css('visibility', 'hidden');
checkboxes.prop("checked", false);
}
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using only JS:
var primaryCheckboxes = document.querySelectorAll("tr td:first-child input[type=checkbox]");
Array.from(primaryCheckboxes).forEach(checkbox => {
checkbox.addEventListener("click", function(event) {
var secondaryCheckboxes = this.parentElement.parentElement.querySelectorAll("input[type=checkbox]");
var checkedSatus = false,
visibilityStatus = "hidden";
if (this.checked) {
checkedSatus = true;
visibilityStatus = "visible";
}
Array.from(secondaryCheckboxes).forEach(checkbox => {
if (checkbox !== this) {
checkbox.checked = checkedSatus;
checkbox.parentElement.style.visibility = visibilityStatus;
}
});
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable>
<input type="checkbox" name="level3" value="3" />
</td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable>
<input type="checkbox" name="level4" value="4" />
</td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>

jQuery Uncheck other checkbox on one checked from same row

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>

PHP- Select all based on checkbox

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>

How can I create checkbox validation that only allows a user to Select a checkbox if a previous checkbox is selected?

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

Categories

Resources