Adjusting the color of a div based on the selection of a radio button contained within it

Looking for a way to change the color of a div when a radio button inside it is selected. I have been searching for a solution and haven't found anything that works yet. I want to display two divs side by side, each saying "choose this plan", with a continue signing up button below them. When a user clicks on the radio button in one of the divs to select a membership plan, I want the styling of that div to change by applying a new background color and text color. However, I am struggling to make this functionality work.

If you have any suggestions or ideas, please let me know!

javascriptjqueryhtmlcss

Answer №1

$( 'input[type=checkbox]' ).on( 'change', function(){

    var selectedValue = $(this).val();

    
    switch ( selectedValue ){
        case 1:
            myDiv.css( 'background-color', 'blue' );
            break;
        
    }

} );

Answer №2

Test out this code snippet:

$('.specificDiv input').click(function(){
   
    if($(this).attr("alt") == "1")
            $('div.signUp').css("background","red")
            .css("color","black");
    else
        $('div.signUp').css("background","cyan")
          .css("color","white");
   
  });
div.specificDiv {
    height: 20px;
    width: 200px;
    float:left;
 }
.signUp{
   border:solid 1px;
    height:20px;
    width:100px;
   text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="specificDiv">
    Choose this option &nbsp;&nbsp;&nbsp;
  <input type="radio" alt="1" name="name" />
  </div>

<div class="specificDiv">
    Choose another option &nbsp;&nbsp;&nbsp;
    <input type="radio" alt="2" name="name" />
  </div>
<br/>
<div class="signUp">
    Sign Up
</div>

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

Express encountered a simple web application error

Greetings, this marks my debut post. As a coding novice, I have been following tutorials on opentutorials.org/course/2136/11950 I attempted to troubleshoot errors in my code, but unfortunately I've hit a roadblock. Upon accessing the site, it displa ...

javascriptnode.jsexpresspug

Issues with OrbitControls in THREE.js are preventing proper functionality

After setting up my JavaScript code to utilize Three.js OrbitControls, I thought I had everything in place: <script>"OrbitControls.js"></script> As well as: var cameraControls; cameraControls = new THREE.OrbitControls(camera, renderer.dom ...

javascriptanimationthree.jsrotationorbit.js

Retrieving HTML Content with Ajax

Currently using this script for an assignment in my class. Still learning! The script checks whether a site is down or not. I want to expand this script to display statuses for each website in the table without duplicating the script. Any suggestions on ...

javascriptjqueryajax

Invoke the public methods of a jQueryUI Widget by passing parameters

Currently, I am utilizing jQuery UI widget factories and am facing a challenge when it comes to calling public methods with parameters. This is the code snippet I have implemented: //Widget $.widget('ui.MyWidget',{ public_method_without_param ...

jqueryjquery-uijquery-plugins

What is a CSS drop-down menu/container?

I've been brainstorming a unique dropdown menu style that involves dropping down a container, but I'm a bit stuck on how to execute it effectively. Although I've outlined the basic concept, I'm still unsure of the implementation. Any t ...

htmlcssdrop-down-menu

What happens when there is a 1-second delay in loading CSS on an HTML page?

Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...

htmlcss

Running a repeated script

I recently discovered a fantastic script called Typer that creates a typewriter effect. However, I noticed that it does not have a built-in method to loop the animation once it reaches the end. Does anyone have any suggestions on how to achieve this? t ...

javascriptjqueryhtml

What is the correct way to utilize JavaScript's clearTimeout function with arguments?

I came up with a simple function to mimic the movement of window blinds. It runs on a server that receives requests with a direction parameter determining whether the blind should move UP, DOWN, or STOP. The simulation works like this: upon receiving a re ...

javascriptnode.js

Identifying the conclusion of a lengthy request in NodeJS/Express

Currently grappling with Server-sent events, my pseudo-code setup involves the following: var listeners = []; app.get('/stream', function (req, res) { listeners.push({ req: req, res: res }); }); // ... some action takes place notify(listene ...

javascriptnode.jsexpressserver-sent-events

Loading images ahead of time - JQuery

Currently, I am utilizing a Kinetic.Layer to import images into a canvas. One issue I am encountering is when I click a print button, it retrieves images from another file and presents them on a white page for printing. The first image consistently loads, ...

javascriptjqueryhtml

I am attempting to obtain the sum using the return function, but I am having trouble getting it to work. Would you be able to assist me in identifying what mistake I am

Can someone explain the benefits of using a return function? var a, b; function addNumbers(a, b) { a = prompt("Enter a number"); b = prompt("Enter another number"); return (a + b); } addNumbers(); ...

javascriptreturn

Activate Intellisense for PHP in .html documents within Webmatrix

How can I set up WebMatrix to treat .html files like .php files? I have been tasked with editing a website that contains php code within .html files. The site works properly due to handler declarations in the .htaccess file. I want to use WebMatrix for ed ...

phphtml.htaccesswebmatrix

Tips on inputting information into a json file once you have completed crawling with casperjs?

I have written code that extracts a large number of words (innerHTML) from various webpages. and I am interested in directly inserting this data into a json file.. Below is the JavaScript code snippet... var words = []; var casper = require('casper ...

javascriptruby-on-railsjsoncasperjs

How can I adjust the column width in OfficeGen?

Currently, I am utilizing officeGen for the purpose of generating word documents. <sup> let table = [ [ { val: "TT", fontFamily: "Times New Roman", }, { val: "Ten hang", ...

javascriptnode.jstypescriptexpress

What steps can I take to ensure that images appear in the correct size when converting an HTML page to a PDF format?

I have noticed an issue with my web page when trying to print it as a PDF. Everything displays correctly until I reach a page with images. Strangely, the images appear with the correct width but an incorrect height in the PDF preview. The HTML code causin ...

htmlcssimagepdf

A fresh perspective on incorporating setInterval with external scripts in Angular 7

Incorporating the header and footer of my application from external JavaScript files is essential. The next step involves converting it to HTML format and appending it to the head of an HTML file. private executeScript() { const dynamicScripts = [this.app ...

javascriptangular

Utilize a singular ajax function to handle various events with personalized data parameters

Could someone help me with this specific issue? Here is an explanation. Let's say I have a function called load_window() and various events like clicks, changes, etc. How can I properly create a custom_data variable in these events and use it in the ...

jqueryajaxfunctionparameters

What is the extent to which a scope variable will be accessible within the link function of Angular?

var $directive = angular.module('myApp', []); $directive.directive('myDirective', function(){ return { restrict: 'E', template: '<h4>{{title}}</h4>' compile: function(element, attrs){ ...

javascriptangularjsangularjs-directiveangularjs-scope

jQuery validation fails to function properly in the absence of errors

I am struggling to understand why my code is not working. There are no error messages in the console. Does the property name in the rule inside validation refer to the id or name of the input form? The library has been correctly included in a general HTML ...

javascriptjqueryjquery-validate

GitHub jQuery Page

Unable to display images based on user choice from the dropdown box, which is causing an issue after committing to GitHub website. There are no errors shown in the developer tool, but when hovering over the image link it says 'Could not load the imag ...

jquerygithub