Develop Reference

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>

Show/hide elements with checkbox check/unchek

I am trying to show and hide tr of table with checkbox check and uncheck. I tried the following script not working for me.
$('.checks').on('ifChecked', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').show();
}
if (checked == 2) {
$('.fruits').show();
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>

Here's what you need to do:
Change ifChecked with onchange. There's no event like ifChecked.
Use toggle based on the state of the checkbox.
Check for $(this).checked to find the state. This will return true or false.
$('.checks').on('change', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').toggle($(this).checked);
}
if (checked == 2) {
$('.fruits').toggle($(this).checked);
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" /> vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" /> Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>

Theres a couple of issues in your logic. Firstly ifChecked is not a valid event. Use change instead. Secondly the logic doesn't work to hide elements. To do that you'd need to loop through all checkboxes and determine their state in order to show/hide the content underneath.
The simplest and most extensible way to achieve what you require is to use a data attribute to specify which element should be toggled when the checkbox is updated. Then you can simply hide/show each element in the set. Try this:
let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" data-target=".vegetables">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" data-target=".fruits">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>

JQuery radio button hierarchical element hiding

I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>

welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>

How to shorten my code with Javascript

My task is what I have done but I am wondering about if the select box is not only three options... If they are 5 or 10 options so let's imagine that how the if else condition below can be...
More than that, after choosing another option, the others option's input will be returned to no value as my code.
Demo
HTML:
<table>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
<tr><td>...</td></tr>
<tr>
<td>
<select id="select_vehicle">
<option value="company_vehicle">Company Vehicle</option>
<option value="hiring_vehicle">Hiring Vehicle</option>
<option value="taxi">Taxi</option>
</select>
</td>
</tr>
<tr id="company_vehicle">
<td>Company Vehicle</td>
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle">
<td>Hiring Vehicle</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
<td>
<input type="text" />
</td>
</tr>
<tr id="taxi">
<td>Taxi</td>
<td>
<input type="checkbox" name="vehicle" value="Taxi" />Taxi
</td>
</tr>
<tr><td>...</td></tr>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
</table>
Javascript:
var select_vehicle = $("#select_vehicle");
// Set selected item
var set_selected_item = $(select_vehicle).val("company_vehicle");
// Hide options "Hiring Vehicle" & "Taxi"
var company_vehicle = $("#company_vehicle"); // Get id "Company Vehicle"
var hiring_vehicle = $("#hiring_vehicle"); // Get id "Hiring Vehicle"
hiring_vehicle.hide();
var taxi = $("#taxi"); // Get id "Taxi"
taxi.hide();
$(select_vehicle).on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if (valueSelected == "company_vehicle") {
company_vehicle.show();
hiring_vehicle.hide();
taxi.hide();
$("#taxi input").removeAttr('checked');
$("#hiring_vehicle input").removeAttr('checked').val("");
} else if (valueSelected == "hiring_vehicle") {
company_vehicle.hide();
hiring_vehicle.show();
taxi.hide();
$("#company_vehicle input").removeAttr('checked').val("");
$("#taxi input").removeAttr('checked');
} else {
company_vehicle.hide();
hiring_vehicle.hide();
taxi.show();
$("#company_vehicle input").removeAttr('checked').val("");
$("#hiring_vehicle input").removeAttr('checked').val("");
}
});

You can do:
$('#select_vehicle').change(function() {
var val = this.value;
$('#'+val).find('input[type="text"]').val('');
$('#'+val).find('input[type="radio"]').prop('checked',false);
$('#'+val).show().siblings('tr[id]').hide();
}).change();
Updated Fiddle

You can use the value of $("#select_vehicle") to dynamically get the id of the element to show. In the HTML add the class select_option to all of the tr's that are option holders like:
<tr id="company_vehicle" class="select_option">
<td>Company Vehicle</td>
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle" class="select_option">
<td>Hiring Vehicle</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
<td>
<input type="text" />
</td>
</tr>
<tr id="taxi" class="select_option">
<td>Taxi</td>
<td>
<input type="checkbox" name="vehicle" value="Taxi" />Taxi</td>
</tr>
Javscipt:
$("#select_vehicle").on('change', function(){
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$('.select_option').hide();
$('.select_option input[type="text"]').val('');
$('.select_option input:checked').prop('checked', false);
$('#'+valueSelected).show();
}).trigger('change');

Adding class to Label Works except for first row

I have a simple table with a series of Yes/No radio button questions and have added some Javascript that should apply a red colour to the label of an adjacent text area input. It's working but not for the first row in the table - all other rows it works.
Here's a cutdown version of the html for the first 3 rows in the table:
<table width="71%" class="record">
<tr>
<td width="63%" valign="top" class="field_name_left"><p><strong>Section 1</strong><br>
(a) section 1A.</p>
</td>
<td width="11%" valign="top" class="field_data">
<input type="radio" name="Scale1A" value="Yes" validate = "required:true " class = "radioClick">Yes
<input type="radio" name="Scale1A" value="No" validate = "required:true " class = "radioClick">No <label for = "Scale1A" class = "error">Please ensure this is completed</label> </td>
<td width="26%" valign="top" class="field_data">
<span class="field_name_left style1" id = "Scale1AWhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale1AWhere" class="where" name="Scale1AWhere" cols="25" rows="2" validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>
<label for = "Scale1AWhere" class = "error">Please ensure this is completed</label> </td>
</tr>
<tr>
<td valign="top" class="field_name_left"> (b) section 1B.</td>
<td valign="top" class="field_data"> <input type="radio" name="Scale1B" value="Yes" validate = "required:true " class = "radioClick" />
Yes <input type="radio" name="Scale1B" value="No" validate = "required:true " class = "radioClick" />
No <label for = "Scale1B" class = "error">Please ensure this is completed</label> </td>
<td valign="top" class="field_data"><span class="field_name_left style1" id = "Scale1BWhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale1BWhere" class="where" name="Scale1BWhere" cols="25" rows="2" validate="required:'input[name=Scale1B][value=Yes]:checked'"></textarea> <label for = "Scale1BWhere" class = "error">Please ensure this is completed</label> </td>
</tr>
<tr>
<td width="63%" valign="top" class="field_name_left"><strong>Section 2.</td>
<td valign="top" class="field_data">
<input type="radio" name="Scale2" value="Yes"validate = "required:true" class="radioClick">Yes <input type="radio" name="Scale2" value="No"validate = "required:true" class="radioClick">No <label for = "Scale2" class = "error">Please ensure this is completed</label> </td>
<td valign="top" class="field_data">
<span class="field_name_left style1" id = "Scale2WhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale2Where" class="where" name="Scale2Where" cols="25" rows="2" validate="required:'input[name=Scale2][value=Yes]:checked'"></textarea> <label for = "Scale2Where" class = "error">Please ensure this is completed</label></td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
and here's my script:
$(".radioClick").click(function(){
theStr = $("#"+this.name+"Where").val().length;
if($(this).val()=="Yes" && theStr == 0){
$("#"+this.name+"WhereLabel").addClass("emphasise");
} else {
$("#"+this.name+"WhereLabel").removeClass("emphasise");
}
$(".where").keyup(function(){
str = this.value.length;
if(str == 0){
$("#"+this.name + "Label").addClass("emphasise");
}else{
$("#"+this.name + "Label").removeClass("emphasise");
}
});
});
$.metadata.setType("attr", "validate");
$("#editRecord").validate();
You can see this in action over at this jsFiddle
For some reason that I can't fathom the Where label for the Question 1A is never changed to red when the Yes button is clicked, but is for all others?

Issue is an extra space in your text area. You need to trim it. or remove it.
theStr = $.trim($("#"+this.name+"Where").val()).length;
Extra space in the text area:-
<textarea id = "Scale1AWhere" class="where"
name="Scale1AWhere" cols="25" rows="2"
validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>
Fixed Code