We Keep Coding

Check a radio randomly in each row

I have 20 rows in an HTML table, 3 radios in each row. I want randomly to select 1 of the 3 radios in every row.
I have a code snippet, but it does not work properly, because it checks more than 1 radios, or none.
Here is my javascript snippet:
function selectRandomRadioButton(radioButtons) {
const index = Math.floor(Math.random() * radioButtons.length);
const element = radioButtons[index];
element.checked = true;
return `Selected Option ${element.value}`;
}
var table = document.getElementById("randomtable");
var totalRowCount = table.rows.length;
for (let i = 1; i < totalRowCount; i++) {
document.addEventListener("DOMContentLoaded", () => {
const radioButtons = document.getElementsByClassName("random");
const message = selectRandomRadioButton(radioButtons);
console.log(message);
});
}
And here is my html:
<table id="randomtable">
<tr>
<th>#</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td><input type="radio" class="random" /></td>
<td><input type="radio" class="random" /></td>
<td><input type="radio" class="random" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="radio" class="random" /></td>
<td><input type="radio" class="random" /></td>
<td><input type="radio" class="random" /></td>
</tr>
</table>
The table has 21 rows including the first, but I only pasted here 2 for example.

Javascript Quantity Validation Multiple Inputs

I'm new to programming and still learn. I just want to ask how to make code validation for more than one input? I have data table item. I want to run validation input for each row.
My Code below is only run for the first row, and cannot running in the second row.
<tr>
<td><input id="stock" type="number" name="stock" value="<?php echo $row->stock; ?>" readonly></td>
<td><input id="qty" onInput="calc();" type="number" name="qty"></td>
</tr>
<script type="text/javascript">
function calc(){
var stock = document.getElementById("stock").value;
var qty = document.getElementById("qty").value;
if(qty > stock){
alert("Qty More Than Stock!");
document.getElementById("qty").value = 1;
}
}
</script>

You can use querySelectorAll with an data-attribute for select all inputs then forEach it and check the value like:
document.querySelectorAll('input[data-check]').forEach(el => {
el.addEventListener('change', () => {
if (parseInt(el.value) > parseInt(el.parentElement.previousElementSibling.children[0].value)) {
alert("Qty More Than Stock!");
el.value = 0;
}
});
});
<table>
<tr>
<td>Stock</td>
<td>Qty</td>
</tr>
<tr>
<td><input id="stock" type="number" name="stock" value="2" readonly></td>
<td><input data-check type="number" name="qty"></td>
</tr>
<tr>
<td><input id="stock" type="number" name="stock" value="3" readonly></td>
<td><input data-check type="number" name="qty"></td>
</tr>
</table>
PS. Remember to use always a structure like my example else my code probably doesn't work.in fact el.parentElement.previousElementSibling.children[0].value it's like say: element - parent of element (td) - previous element (other td) - the first children of the previus element (input).
Another option is use another data-attribute for select the stock value like:
document.querySelectorAll('input[data-check]').forEach(el => {
el.addEventListener('change', () => {
let stock = document.querySelector('input[data-index="'+el.dataset.stock+'"]');
if (parseInt(el.value) > parseInt(stock.value)) {
alert("Qty More Than Stock!");
el.value = 0;
}
});
});
<table>
<tr>
<td>Stock</td>
<td>Qty</td>
</tr>
<tr>
<td><input data-index='0' type="number" name="stock" value="2" readonly></td>
<td><input data-check data-stock='0' type="number" name="qty"></td>
</tr>
<tr>
<td><input data-index='1' type="number" name="stock" value="25" readonly></td>
<td><input data-check data-stock='1' type="number" name="qty"></td>
</tr>
</table>

How to get reference to another object on other column on same row in a table in Javascript?

I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .

You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>

Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method

How to get the position of the checked checkbox in a table

I have a table with bunch of checkboxes in each row. How can I find position of the checked box e.g. 1A or 1B when both or one of the checkboxes is checked in first row. The page I am trying to modify, dynamically makes the table based on two factors for the rows and columns. SO I just need to grab the rowname and colname in order to program further. e.g. 10(A) if the name of first row was '10'.
<table id="mytable">
<tr>
<td> </td>
<td align="center"> A </td>
<td align="center"> B </td>
</tr>
<tr>
<td> 1 </td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td> 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<tr> <button id="save">Click</button> </tr>

This will get the column and row of a checked input, and it gets the column letter and row number through calls to document.querySelector, using CSS3 first-child and nth-child selectors based on the column and row:
document.getElementById('mytable').addEventListener('click', function(e) {
if(e.target.tagName === 'INPUT') {
var td= e.target.parentNode, //the input's td parent
tr= td.parentNode, //the td's tr parent
col= td.cellIndex, //the input's column
row= tr.rowIndex, //the input's row
header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent,
number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent;
document.getElementById('output').textContent= number+header;
}
});
<table id="mytable">
<tr>
<td></td>
<td align="center">A</td>
<td align="center">B</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<div id="output"></div>

try this # plain javascript:
var checkboxes = [];
for(var i =0; i<document.getElementsByTagName("input").length;i++) {
if(document.getElementsByTagName("input")[i].checked) {checkboxes.push(i)}
}
checkboxes is an array of checked checkboxes - e.g. [0,2] if the first and the 3rd checkboxes are checked

or like this:
https://jsfiddle.net/zLy90w40/1/
function getCheckBox(){
var oneA = document.getElementById('1a');
var oneB = document.getElementById('1b');
var twoA = document.getElementById('2a');
var twoB = document.getElementById('2b');
if (oneA.checked){
alert("1 A was checked") ;
}
if(oneB.checked){
alert("1 B was checked") ;
}
if(twoA.checked){
alert("2 A was checked") ;
}
if(twoB.checked){
alert("2 B was checked") ;
}
}

show / hide table columns using jQuery

I have a table with five columns
column1 column2 column3 column4 column5
------- ------- ------- ------- -------
and I have some check boxes each one for one column when the first checkbox is checked
then I need to show the first column , if unchecked I need to hide first column. Like that
I need to do for all columns.
I found some answers but I did not find any solution .First time it is hiding then other
operations are not working on that.
$('#tableId td:nth-child(column number)').hide();
Please help me .Thanks in advance....

Here you go, full solution:
http://jsfiddle.net/vXBtP/
and updated here: http://jsfiddle.net/vXBtP/5/
<table>
<thead>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
$(document).on('change', 'table thead input', function() {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('table tbody tr td').eq(index).show();
} else {
$('table tbody tr td').eq(index).hide();
}
});

Depending on the column # you wanna hide, use this stolen one liner:
$('td:nth-child(2)').hide();
if you use th
$('td:nth-child(2),th:nth-child(2)').hide();

If I got what you mean, you can make it real simple using tr th, tr td and nth-child selector. You can go based on index, but you'll need to add 1 as nth-child is not 0 indexed like elements in jQuery. And the JS doesn't really have to be drawn out. I should mention, placing tr before td:nth is very important in that you don't want "only the nth td". if that's the case, you won't hide every col on every row.
See WORKING jsFIDDLE of YOUR Example
FYI: If you want something "cleaner" looking, (like on the turbotax site) dont hide the td itself. Instead make it slightly wider than your largest piece of text, and place each piece of text inside p or div tags inside each cell. Then change you column selector to grab each cell's inner element and hide that instead.
See Example of this Alternate way here!
HTML
<table>
<thead>
<tr>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
</tbody>
</table>
<button>Reset</button>
JavaScript
$(function() {
// Selects your table by id, then the input checkboxes inside the table, you can
// alternate this call with classnames on your inputs if you're going to have
// more inputs than what's desired in call here.
// also note i'm using the "change" function and not "click", this simply
// provides easier control of what's going on with your inputs and makes
// later calls (like reset) a much easier call. Less thinking required
$("#tableId input[type=checkbox]").on("change", function(e) {
// First variable grabs the inputs PARENT index, this is the TH containing
// the input, thus the column you want hidden.
// The second is calling ALL TH's && TD's having that same index number
var id = $(this).parent().index()+1,
col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
// This simple inline "if" statement checks if the input is checked or now
// and shows the columns based on if it IS checked
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML
$("button").on("click", function(e) {
$("input[type=checkbox]").prop("checked", true).change();
});
})

You can get the header index of table and make the table header and td elements hidden. Something like this Suppose the index of table header is index = 2;
var index= tableHeaderIndex; // 2 here
$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();

Like this?
Lashed together quickly but should work.
<table id="TabToHide">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col4">Col 4</td>
<td class="Col5">Col 5</td>
</tr>
<tr>
<td class="Col1">Stuff 1</td>
<td class="Col2">Stuff 2</td>
<td class="Col3">Stuff 3</td>
<td class="Col4">Stuff 4</td>
<td class="Col5">Stuff 5</td>
</tr>
</table>
<br />
<table>
<tr>
<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" checked="checked" /></td>
<td><input name="Col3" type="checkbox" checked="checked" /></td>
<td><input name="Col4" type="checkbox" checked="checked" /></td>
<td><input name="Col5" type="checkbox" checked="checked" /></td>
</tr>
</table>
Javascript
$('input:checkbox').change(function(){
var ColToHide = $(this).attr("name");
if(this.checked){
$("td[class='" + ColToHide + "']").show();
}else{
$("td[class='" + ColToHide + "']").hide();
}
$('div#Debug').text("hiding " + ColToHide);
});

$(document).ready(function(){
$('table tr input:checkbox').change(function(){
var num = $(this).parents("th").index();
alert(num);
if($(this).is(":checked"))
{
$('table tbody tr td').eq(num).show();
}else
{
$('table tbody tr td').eq(num).hide();
}
});
});
JS FIDDLE LINK

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show and Hide Columns in a Table</title>
<link href="CSS/table.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
</head>
<body>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column</p>
<div id="grpChkBox">
<p><input type="checkbox" name="empid" /> Employee ID</p>
<p><input type="checkbox" name="fname" /> First Name</p>
<p><input type="checkbox" name="lname" /> Last Name</p>
<p><input type="checkbox" name="email" /> Email</p>
<p><input type="checkbox" name="phone" /> Phone</p>
</div>
<table id="someTable">
<thead>
<tr>
<th class="empid">EmpId</th>
<th class="fname">First Name</th>
<th class="lname">Last Name</th>
<th class="email">Email</th>
<th class="phone">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="empid">E342</td>
<td class="fname">Bill</td>
<td class="lname">Evans</td>
<td class="email">Bill#devcurry.com</td>
<td class="phone">234-2345-2345</td>
</tr>
<tr>
<td class="empid">E343</td>
<td class="fname">Laura</td>
<td class="lname">Matt</td>
<td class="email">laura#devcurry.com</td>
<td class="phone">123-1234-5678</td>
</tr>
<tr>
<td class="empid">E344</td>
<td class="fname">Ram</td>
<td class="lname">Kumar</td>
<td class="email">ram#devcurry.com</td>
<td class="phone">345-3456-7890</td>
</tr>
</tbody>
</table>
</body>
</html>

You can add an "id" on your "th" element and simply call:
$('#yourId').hide();
here is the code I've utilized :
$(document).on('click', '.form-check-input', function(e){
var finition_checked = $('#finition_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
var size_checked = $('#size_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
if (finition_checked && size_checked.length === 0){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_size').hide();
};
if (finition_checked.length === 0 && size_checked){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_finition').hide();
};
if(size_checked && finition_checked){
$('#price-container').hide();
$('.table-responsive').show();
}
if(size_checked.length === 0 && finition_checked.length === 0){
$('#price-container').show();
$('.table-responsive').hide();
};
console.log(finition_checked, size_checked)
var unique_value = [];
var finition = [];
var size = [];
//more logic to come
});