Apply a CSS class to the selected radio button when retrieving row data from the table

How can I dynamically add a CSS class to a snippet of code when a radio button is selected?

Here's the jQuery Snippet:

$(document).ready(function (){
    $("input:radio").click(function () {
        if ($(this).is(":checked")) {
           var empid = $(this).closest("tr").find("td:eq(0)").text();
           $("#getreco").val(empid);

            var empname = $(this).closest("tr").find("td:eq(1)").text();
            $("#getreco1").val(empname);

            var empdes = $(this).closest("tr").find("td:eq(2)").text();
            $("#getreco2").val(empdes);
        }
    });
});

Answer №1

Learn how to apply a class to a radio button and style it with CSS based on the added class in this demonstration.

$(document).ready(function() {
  $("input:radio").click(function() {
    if ($(this).is(":checked")) {
      $(this).addClass("custom-class");
    }
  });
});
.custom-class {
  padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="radio" /></td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

For my Sharepoint 2010 application, I have been utilizing jQuery to handle most events on the client-side. However, when it comes to saving data to the Sharepoint list and generating a PDF file with that data, I need to switch to server-side processing usi ...

Troubleshooting the AutoHeight Problem in Slidesjs

My issue revolves around Slidesjs which can be found at . Specifically, I am facing a problem with autoHeight feature not displaying properly in Chrome. Initially, the height of slides shows as 0px but upon clicking to the next slide, it adjusts to the c ...

The previous and next arrows do not have a looping feature

I have a collection of 10 HTML pages stored in a folder called PROJECTS. Everything is functioning properly, except for the prev and next arrow navigation buttons. The issue arises when navigating to the last page (e.g., projectPage_10.html) from my Projec ...

The manipulation of the DOM is not possible within the AJAX success function

I'm curious about the issue I am facing with changing the 'this' element on AJAX success. Despite my efforts to switch classes and add a new data attribute to the anchor tag in ajax success, it doesn't seem to be working. Interestingly, ...

evt.target consistently returns the initial input within the list of inputs

My React file uploader allows users to attach multiple file attachments. Each time a user clicks on an input, I retrieve the data-index to identify the input position. renderFileUploader() { let file_attachment = this.state.file_attachment.map(fun ...

Click to rotate the image - jQuery

I'm attempting to create a functionality where an image rotates upon clicking. Since this feature needs to work for multiple images, I understand the importance of utilizing the $(this) tag in jQuery. However, my initial attempt failed to produce the ...

Exploring the intricacies of React Router parameters

I have been facing some issues with my routing setup. Specifically, I have a static route called list and a dynamic route called user/:id. The problem arises when navigating between these two pages. (1) Whenever I navigate to the list route from the user/: ...

Using HTML/PHP output to create callbacks, retrieving variables

Utilizing jQuery to send form data using the jQuery form plugin has been quite helpful for me. As of now, I am only able to receive the "html" callback in the "success:" section. Is it possible to differentiate the success response solely based on the htm ...

Sending a JavaScript Array to PHP results in receiving Undefined or Disallowed Key Characters

I've been grappling with this problem for a few days now. I have an array in JavaScript that I need to send over to my PHP method. This is my PHP code: public function saveCampaignSendToMediaOwner() { $result = $this->input->post(); e ...

The Best Way to Refresh a ReactJS Component in Plain HTML/JavaScript

So here's the situation. I'm diving into creating a React Modal component that can seamlessly integrate with any vanilla HTML / JS file. By generating a bundle.js file using Webpack from my React component, it becomes easier to inject it into a d ...

Transferring PHP array to JavaScript with the help of AJAX

I've been working on integrating Google Maps and Instagram in a project of mine. My main challenge is figuring out how to pass the coordinates of Instagram photos from my PHP file to my JavaScript file using AJAX. I'm quite lost when it comes to ...

Ways to resolve the form submission issue on ASP.NET Core 3.1 with jQuery integration

I've been encountering issues and I'm looking to the community for help. A year or two ago, a web application was created using ASP.NET Core 3.1 with Razor Pages and C# code behind files. jQuery is also being utilized on the site. The problem li ...

Resolving the Enigma: Querying jQuery for Real-Time Validation and

I'm fairly new to jQuery and I'm facing a challenge in my registration form script. Specifically, I want to check if the entered username or email is already taken while the user is typing. Currently, this functionality works by making a json req ...

Non-responsive behavior triggered by a button click event (JavaScript)

Help needed with displaying results on the same page for an online calculator I'm creating. Why are the results not showing up as expected? I want users to input 4 pieces of information, have the logic executed, and then display the answers below th ...

Automatically choosing an option from a jQuery Autocomplete dropdown menu

Currently, on my webpage, there are a few jQuery autocomplete comboboxes in use. I am looking for a way to automatically select an item from the dropdown list when a user clicks a button or if a preset value is passed to the page specifically for that co ...

Events are not loading in FullCalendar

I've integrated FullCalendar into my asp.net MVC application. However, I'm facing an issue where the events are not loading properly when fetched through an ajax call. Below is the code I'm using. Can you help me identify the problem? <d ...

Displaying a second dropdown menu when the first option is chosen

I need help displaying a second select menu once an option in the first one has been selected. How can I achieve this using jQuery? Here is the code snippet: CSS: #2nd{visibility: hidden;} #a{visibility: hidden;} HTML: Please select: <select id ...

Code to select the first row in a table using CSS styling

I'm looking for a CSS selector to target the first <tr> in a <table>. After searching online, I found some selectors like tr:first-child and table *:first-child tr:first-child, table tr:first-child. Unfortunately, these do not work in my ...

Show the price of the item with a click of a button

There are three buttons where I can select values and input them into the button. Once all three values are selected in the buttons, I would like the product of these values to be displayed in a fourth button. Here is my HTML code: <label>S *</l ...

Automatic Hiding of Dropdown Menu in Twitter Bootstrap: A Quick Guide to Set a 2-Second Timer

Is there a way to make the dropdown menu hide automatically after the mouse cursor leaves the area? If you take a look at Amazon.com for example, when you hover over "Shop by Department" and then quickly move your cursor away and back within about half a ...