Develop Reference

When a Radio Button is Unchecked, Hide its Connected Element

I'm sorry, the title is awkward. Basically I'm using onclick() to show/hide different elements. When I click Radio1, it shows the element, but when I click Radio2 it doesn't hide Radio1's element, and vice versa. The only way I can think of doing it is doing a manual if statement, like so:
function RadioCheck(id) {
if (id == 'Radio1') {
document.getElementById(id).style.display = "table-row-group";
document.getElementById('Radio2').style.display = "none";
} else if (id == 'Radio2') {
document.getElementById(id).style.display = "table-row-group";
document.getElementById('Radio1').style.display = "none";
}
}
But when I have to do that for 5 radio buttons, it gets messy and gaudy. I'm not sure how to go about making it so the other elements will hide.
I've tried checking if the the radio with the corresponding is checked/unchecked, to hide/show it. But that doesn't work because obviously once you pass through another parameter, the previous one won't work
I've Googled and can't find it.
Edit: Here's the relevant HTML
Radio HTML
<tr>
<td>
<span class="label">Platform:</span>
</td>
<td>
<input type="radio" name="platform" onclick="RadioCheck('Radio1');">Radio1</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio2');">Radio2</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio3');">Radio3</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio4');">Radio4</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio5');">Radio5</input>
</td>
</tr>
Radio1 HTML:
<tr id="Radio1">
<td>
<span class="label">Limited State:</span>
</td>
<td>
<input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
<input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
</td>
</tr>
Radio2 HTML:
<tbody id="Radio2">
<tr>
<td>
Locked to Sector?
</td>
<td>
<input type="radio" name="sectorLock" >Yes</input>
<input type="radio" name="sectorLock" >No</input>
</td>
</tr>
<tr>
<td>
<span class="label">Tech Alert</span>
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Alerts Portal
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Reason for Call
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
What exactly is not working?
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Describe specific web service
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
</tbody>
And I have my CSS to start the elements off hidden:
#Radio1 {
display: none;
}
#Radio2 {
display: none;
}

You can simply hide everything and then display one instead of adding logic to hide everything except the one that is about to be displayed.
function RadioCheck(id)
{
// Hide all
document.getElementById('Radio1').style.display = "none";
document.getElementById('Radio2').style.display = "none";
document.getElementById('Radio3').style.display = "none";
document.getElementById('Radio4').style.display = "none";
document.getElementById('Radio5').style.display = "none";
// Display one
document.getElementById(id).style.display = "table-row-group";
}

Here's a method that uses event listeners rather than inline onclick, also uses values for your radios to determine which TR's to show/hide. This example only has content for the first two radios but is extendable for as many as you want.
document.addEventListener('DOMContentLoaded', () => {
let radios = document.querySelectorAll('.tr-toggle-radios input[type=radio]')
let toggled = document.querySelectorAll('.tr-toggle-content')
radios.forEach(el => {
el.addEventListener('change', e => {
toggled.forEach(tog => tog.classList.add('hide'));
document.querySelector(`#${e.target.value}`).classList.remove('hide')
})
})
})
.hide {
display: none;
}
.tr-toggle-content {
display: table-row-group;
}
<table>
<tr>
<td>
<span class="label">Platform:</span>
</td>
<td class='tr-toggle-radios'>
<input type="radio" name="platform" value="Radio1">Radio1</input>
<input type="radio" name="platform" value="Radio2">Radio2</input>
<input type="radio" name="platform" value="Radio3">Radio3</input>
<input type="radio" name="platform" value="Radio4">Radio4</input>
<input type="radio" name="platform" value="Radio5">Radio5</input>
</td>
</tr>
<tr class='tr-toggle-content hide' id="Radio1">
<td>
<span class="label">Limited State:</span>
</td>
<td>
<input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
<input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
</td>
</tr>
<tbody class='tr-toggle-content hide' id="Radio2">
<tr>
<td>
Locked to Sector?
</td>
<td>
<input type="radio" name="sectorLock">Yes</input>
<input type="radio" name="sectorLock">No</input>
</td>
</tr>
<tr>
<td>
<span class="label">Tech Alert</span>
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Alerts Portal
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Reason for Call
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
What exactly is not working?
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Describe specific web service
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
</tbody>
</table>

Try this: You keep an array of radio IDs and loop through them when a user interacts with a radio. Then you display the checked radio and hide all the others.
const radio = ['Radio1', 'Radio2', 'Radio3'];
function RadioCheck(id) {
radio.forEach((item) => {
if(id === item){
document.getElementById(id).style.display = "table-row-group";
}else{
document.getElementById(item).style.display = "none";
}
});
}

Remove 3 checkboxes from a table

I created a table with some checkboxes and I want to create a JavaScript that remove the ones I don't want there but I'm stuck in the JavaScript part. Could you please help me in this small challenge? Thanks!
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
The JS part done so far, but the way I tried to removed the tr doesn't work
let findTableOfCheckBoxes = document.getElementsByClassName('.isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}

You're committing the cardinal sin of assuming your selector is finding elements. It's not, because you need isTable not .isTable when using getElementsByClassName() which, since it's about classes, assumes the . for you.
There's also a more modern, cleaner way to achieve what you need. Follows:
document.querySelectorAll('.isTable').forEach(tbl => {
let row = tbl.querySelector('tr:nth-child(3)');
row && row.remove();
});

You added "." character for the getElementsByClassName. Just remove it.
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>

Count how many are checked from generated checkbox

I'm working on a simple table that generates number of checkbox, and count the total of how many are checked.
when I unchecked, it will show how many are the remaining checked checkbox.
my problem is when I generate new rows the counter doesn't work anymore.
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
}
});
$('input:checkbox').click(function() {
var count = $(this).closest('table').find('input:checkbox:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>

Use event delegation instead, so that you only need to apply a single listener to the container, otherwise you'll have to re-add listeners to each element every time:
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
}
});
$('table').on('click', 'input', function() {
var count = $(this).closest('table').find('input:checkbox:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>

$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input class="checkeboxclass" type="checkbox" checked></td></tr>');
}
});
$('input[type="checkbox"]').on( "change", function() {
var count = $('input[type="checkbox"]:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>

select value of input element inside html table using jquery

I have an html table with n number of rows and 4 columns. Inside each row td I have 2 children elements- label and an input. I want to check the value of input under 2nd td when an onblur event occurs at input under 3rd td.
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td (ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as
function sum_cr() {
alert('Hi');
alert($(pThis).parent().eq(2).children('accno').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
But my javascript code fails. Can anybody help me to get the value?
JSfiddle: https://jsfiddle.net/nidheeshmtr/nmku2gq1/4/

function sum_cr(ele) {
alert('Hi')
alert('using prev(): '+$(ele).parent('td').prev('td').find('input').val());
//or you can use below for input value under 2nd td element
alert('using nth-child(): '+$('tr td:nth-child(2)').find('input').val());
//if you know attributes of TD tag, u can use below
alert('using attribute selector: '+$('td[headers="ACNO"]').find('input').val());
//by using siblings, get the parent 2nd sibling
alert('using siblings(): '+$(ele).parent().siblings(':nth-child(2)').find('input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>

Your selector is not valid. You have to pass this in the function call. Try the following way:
function sum_cr(that) {
alert($(that).parent('td').prev('td').find('input').val());
}
Run code snippetExpand snippet
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td(ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>

The context is not valid...
Pass the 'this' context from html code to the sum_cr() method as a parameter and define the method as follows.
function sum_cr(that) {
alert($(that).parent('td').prev('td').find('input').val());
}

function sum_cr(ele) {
alert($('tr td:nth-child(2) input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>

You can define an ID for each input and then get their value as you want
function sum_cr() {
var elem = $('#xyz').val();
alert(elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input id="xyz" name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
Check whether this helps or not?

How to verify whether a value is from a particular table in HTML

Below is code snippet of my HTML page:
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Aniruddh </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Ajay <td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Vijay </td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group1 </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group2 <td>
</tr>
</table>
</div>
I am developing a Web application where I send messages to users by the push of a button. I have two HTML tables on my page namely Contacts with "id"="cntList" and Groups "id"="grpList"; where both tables will have names and a checkbox corresponding to them.
When I click on some contact in Contacts table or a group in the Group table, my code should understand whether it is from a Contacts table or it is a Group table and call the function to send the message accordingly.
I am getting how to start with JQuery in this?

You can retrieve the id of the clicked parent table element within event handler by checking the .id property of this, or event.currentTarget using .closest() with table[id$=List] as selector passed, .attr() with "id" as parameter
var selector = "table[id$=List]";
$(selector + " :checkbox").click(function(event) {
console.log($(this).closest(selector).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Aniruddh</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Ajay
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Vijay</td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group2
<td>
</tr>
</table>
</div>