Determining the correctness of a radio group tick pattern using jQuery

I am working on a form that has 3 questions with radio groups. The goal is to show a hidden div after all 3 radio boxes are checked. The condition for the div to appear is if the first question is answered "NO" and the remaining 2 questions are answered "YES". I am new to jQuery, so any help would be appreciated.

<table width="100%" cellpadding="3" cellspacing="5">
    <tr>
    <td>Question 1</td>
    </tr>
    <tr>
    <td><input type="radio" name="q1" value="yes" />Yes
<input type="radio" name="q1" value="no" />No</td>
    </tr>


    <tr>
    <td>Question 2</td>
    </tr>
    <tr>
        <td><input type="radio" name="q2" value="yes" />Yes
<input type="radio" name="q2" value="no" />No</td>
    </tr>


<tr>
    <td>Question 3</td>
    </tr>
    <tr>
        <td><input type="radio" name="q3" value="yes" />Yes
<input type="radio" name="q3" value="no" />No</td>
    </tr>

</table>

Answer №1

give this a shot:

$('input').on('change' , function(){

  if($('input[name="q1"]:checked').val() == 'no' && $('input[name="q2"]:checked').val() == 'yes' && $('input[name="q3"]:checked').val() == 'yes'){

    $('body').append('<div id="testDiv">A new div</div>');

  }
  else{

    $('#testDiv').remove();

  }

})

http://jsfiddle.net/example/70kwo1oe/

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

Difficulty encountered while transmitting JSON data from Express to React

Currently, I am diving into learning express and facing an issue with transmitting JSON data from my express server to my react application. When working on my express server, I initiate an API call to the openweathermap API and then send the obtained JSO ...

Enhancing the ShaderMaterial attribute in three.js

Exploring the three.js tutorial on shaders, we discover a technique for updating uniform values of a ShaderMaterial: var attributes = { displacement: { type: 'f', // a float value: [] // an empty array } }; var uniforms = { amplitu ...

express.static() fails to serve files from public directories when accessed via router paths other than "/"

Express static configuration: app.use(express.static(__dirname + "/public")); Directory Structure: --public --assets --js --[JavaScript scripts] --stylesheets --[CSS files] Defined Routes: const shopRoutes = require('./routes/shopRo ...

A step-by-step guide on sending a question to an MS Azure chat bot through the direcline channel using client-side scripting techniques

Currently, I am utilizing the Azure Chat bot (v4 MS bot framework) and integrated it into the Direcline channel. My goal is to send a question to the chatbot when a user clicks on one of the suggested questions. In the image below, you can see the list of ...

Angular JS is struggling to reconcile the state with another state

I am attempting to create a substate called memstate within a state named single_post. My goal is to navigate to this state from the single_post controller using the following code: $state.go(single_post({id: somename}); However, I keep encountering an e ...

Understanding text overflow in JavaScript and jQuery

I am facing an issue where the text in some columns of my table is breaking into two lines. I believe reducing the font size will resolve this problem, but I am unsure about where to start coding for this particular issue. If you have any ideas or sugges ...

Selenium can locate an element by its CSS selector that comes after a specific element

How can I locate the text "Interesting" which is the first occurrence of the class b after h1.important when using Selenium? <div class="a"> <div class="b">Not interesting</div> </div> <div class="title"> <h1 c ...

Transform Angular Material Table selection color with selection

Is it possible to customize the color of the selector in an Angular Material table when using selection? Learn more about it https://i.sstatic.net/5ZJQT.png ...

Incorporating unique typography onto your website (HTML/CSS)

I am currently struggling to implement a custom font on my website. I'm not very experienced with programming, and since my friend isn't available to help, I'd appreciate a solution from anyone. The issue I'm facing is that while the Ca ...

CSS - vertical and horizontal lines vary in thickness depending on the design

I am working on creating a grid that is automatically generated in my Angular 2 application. Currently, it consists of 1px wide divs as vertical lines and 1px high divs as horizontal lines. However, there seems to be an issue with inconsistent thickness be ...

Incorporate a stylish gradient background into react-chartjs-2

I am currently working on adding a gradient background with some transparency to a radar graph within a react component. So far, I have only found solutions that involve referencing a chartjs canvas in an html file, but none for implementing it directly in ...

The parameter 'prevState: Stock[]' does not match the expected type 'SetStateAction<Stock[] | []>'

I'm currently diving into TypeScript and I encountered the following error message that has me stumped. Interestingly, the code runs smoothly without TypeScript. Can anyone provide guidance on how to resolve this issue? Error details: Argument of typ ...

Unable to prevent AJAX request initiated by setTimout

Despite coming across various posts discussing how to abort AJAX requests using the .abort() function, I am still unable to make it work in my case. One example of such discussion can be found in this particular post. Currently, my code initiates repeated ...

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

In my React Native project, I am utilizing Flow for type checking. For more information, visit: I currently have two files named SvgRenderer.js and Cartoon.js where: Cartoon extends SvgRenderer Below is the source code for both of these files: SvgRend ...

Synchronous async routes in Node Express

My express server requires fetching data from multiple external sources for each request, with the logic separated into various routers (some of which are not under my control). These routers operate independently, eliminating the need for one to wait on ...

Discovering the CSS code for customization

As a beginner, I apologize in advance for any silly questions ˆˆ I am currently working on a website using bootstrap. Everything is functioning correctly, but I am struggling to override some CSS styles. In the image provided, you can see how I used the ...

Retrieving the value of an ASP.NET Literal in JavaScript

Is there a way to retrieve the value of an ASP.NET Literal control in JavaScript? I attempted the code below but it didn't return any values: var companyName = document.getElementById('litCompanyName').textContent; var companyNumber = docum ...

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

Issues with Bootstrap 4's Vertical Alignment Functionality

As I work on developing an Electron app to test out the software, I am facing a challenge with basic interface design. I have opted for Bootstrap 4 to style my form, but I'm struggling to vertically center it. Despite trying various solutions suggest ...

Would you like to learn how to set an auto-play video as the background in a webpage section, similar to the one found on http://www8.hp.com/in/en/home.html?

I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this? ...