Below is the code that I've included.
Desired Outcome: Hide the columns with tr class="invalid" when the checkbox is clicked. Display all tr columns when the checkbox is unchecked.
Any help or solution would be greatly appreciated.
Below is the code that I've included.
Desired Outcome: Hide the columns with tr class="invalid" when the checkbox is clicked. Display all tr columns when the checkbox is unchecked.
Any help or solution would be greatly appreciated.
If you want to hide certain elements based on the checkbox status, you can use the adjacent selector like this:
#testday input[type="checkbox"]:checked ~ #testtable .invalid {
display:none;
}
See the snippet below for an example:
#testday input[type="checkbox"]:checked ~ #testtable .invalid {
display: none;
}<div id="testday">
<input type="checkbox" checked><span class="invalid black-border">Tests not in POR</span>
<table id="testtable" class="tablesorter custom-popup">
<thead>
<tr>
<th data-priority="critical" class="testName">Test Name</th>
</tr>
</thead>
<tbody>
<tr class="invalid">
<td class="testName">
<abbr title="BasicPerformanceMatrixTest">BasicPerformanceMatrixTest</abbr>
</td>
</tr>
<tr class="invalid">
<td class="testName">
<abbr title="StripeReadECCFatalDuringPLIRestore_NSGSE-23331">StripeReadECCFatalDuringPLIRestore_NSGSE-23331</abbr>
</td>
</tr>
<tr class="invalid">
<td class="testName">
<abbr title="ContextReplayTimes_NSGSE-27617">ContextReplayTimes_NSGSE-27617</abbr>
</td>
</tr>
<tr class="invalid">
<td class="testName">
<abbr title="XORRecoveryShouldSkipRetiredPages_NSGSE-27131">XORRecoveryShouldSkipRetiredPages_NSGSE-27131</abbr>
</td>
</tr>
<tr>
<td class="testName">
<abbr title="PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801">PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801</abbr>
</td>
</tr>
<tr>
<td class="testName">
<abbr title="PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802">PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802</abbr>
</td>
</tr>
<tr>
<td class="testName">
<abbr title="PliDumpECCFatal(XOROff_1Page)_NSGSE-22803">PliDumpECCFatal(XOROff_1Page)_NSGSE-22803</abbr>
</td>
</tr>
<tr>
<td class="testName">
<abbr title="PLIECCFatal(SuperXORtest)_NSGSE-23162">PLIECCFatal(SuperXORtest)_NSGSE-23162</abbr>
</td>
</tr>
</tbody>
</table>
</div>Styling with CSS
To hide certain elements, utilize the general sibling selector ~. This selector targets the second element only if it follows the first element and both have the same parent.
input[type="radio"]:checked ~ div .hidden {
visibility: hidden;
}
input[type="checkbox"]:checked ~ #testtable .invalid {
visibility:hidden;
}
This method seems straightforward.
Users are able to input product data into a MySQL database through my web form. They can choose between three main suppliers using radio buttons (Sigma-Aldrich, VWR, and Filter-Service), or select 'other' and specify a different supplier in a tex ...
Visit the link and then open the file login_screen/components/Form.js. Within this file, you will notice that the textInput is styled as follows: textInput: { flex:1, height: 50, marginBottom: 20 } If you observe closely, you'll see ...
I am looking to add previews within multiple divs in the same container. Here are my code snippets: HTML Code: <div class="thumbnail"> <div id="resim_view"> <img class="image img-thumbnail" src="#" /> </div> & ...
I'm looking to create reusable sections for my bookdown project. Successes: I've created a style.css including: .titeldefbox{ display: flex; width: 100%; left: 0; top: 0; position: absolute; background-color: darkslategray; height: ...
I am a beginner in Angular JS and recently wrote a simple Angular code. However, I am encountering issues with the HTML rendering incorrectly or the expressions not getting evaluated. I could use some help identifying what I might be missing. The version ...
https://i.sstatic.net/qPSqe.jpgHere is an excerpt of the progress I have made main.html (it's actually a form) <div class="form-group form-check-inline"> <input class="form-check-input" type="radio" name=& ...
I have a query regarding aligning all elements in a single line. This is how it should ideally appear: Initially, I arranged the elements by creating tables and inserting each ProgressBar as Div Elements within table cells. However, this setup seems to b ...
<a class="btn">Click ME </a> <div class="content"> Content </div> $('.btn').click(function(){ $('.content').slideToggle(); }); Check out the example here Everything is working properly, but I have a q ...
I'm encountering issues with my links not functioning properly in Internet Explorer. <a style="text-decoration:none;" href="<?php echo base_url();?>index.php/person/create/<?php echo $this->uri->segment(4);?>" > When I check ...
As someone who is deeply interested in creating clean and efficient markup, particularly with the advancements of HTML5, I have found it challenging to divorce content structure from presentation. After delving into object-oriented CSS and the use of class ...
Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...
As a developer, I have created a single page that fetches data from a registration page. On this page, each data row has an "add" and "unfriend" button, with the latter initially disabled. When a user clicks the "add" button, a prompt box appears asking ...
Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...
I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...
Hey there! I'm currently working with the Html5 QrCode library to implement a scanner, and I've integrated it into a modal. However, I'm facing an issue where the camera continues running even after I close the modal. I'm wondering if t ...
I have the following code for the header where I want two pictures to be at either end, preferably at the corners. The text should be directly in the center on a desktop, and on mobile, all images and text should be stacked. Is that possible? To view the ...
$(document).ready(function(){ $("#toggle-btn").click(function(){ $(".book").toggleClass("with-summary",1000); }); }); .book { height:500px; width:100%; position: relative; border:1px solid red; } .book-summary { position: absolute; lef ...
Recently, I stumbled upon a fantastic timer and redirect script based on jQuery from the talented folks over at the 'jQuery by Example' website. This script automatically redirects users after a specified number of seconds has elapsed: Here&apos ...
Link to my code on Plunker In my attempt to create a fluid layout, the sidebar of my site consists of a list of links. I am trying to make each <li> element a perfect square, but when I add text inside, it disrupts the dimensions and turns the squar ...
I'm currently working on implementing Drag & Drop functionality using AngularJS directives. Here's the concept I am trying to execute : Check out my codePen However, I keep encountering an error saying 'getData' is undefined. Th ...