How to use jQuery to hide radio buttons that are not checked when clicking a submit

Looking to dynamically hide all unchecked radio buttons and their labels until a submit button is clicked, displaying only the checked radio button.

<form method="post">
    <input type="radio" name="radiobtn">
    <label for="first">First</label>
    <input type="radio" name="radiobtn">
    <label for="second">Second</label>
    <input type="radio" name="radiobtn">
    <label for="third">Third</label><br>
    <input id="submit" type="submit">
</form>

Any suggestions on how to achieve this using jQuery? A snippet of jQuery code would be greatly appreciated!

Answer №1

Try a simple solution like this

$('#submit').click(function(e) {
  e.preventDefault(); // stop the form from submitting
  $('[name="radiobtn"]:not(:checked)') // select all unchecked radio buttons
    .hide() // hide them
    .next() // select the labels next to them
    .hide(); // hide the labels
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
  <input type="radio" name="radiobtn">
  <label for="first">First</label>
  <input type="radio" name="radiobtn">
  <label for="second">Second</label>
  <input type="radio" name="radiobtn">
  <label for="third">Third</label>
  <br>
  <input id="submit" type="submit">
</form>

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

JavaScript encounters a parsing error when dealing with an async function

Ever since I developed a node.js web application, I've been utilizing MSSQL for the database. To streamline SQL functions, I crafted functions (sql.js) to handle all the necessary queries. Furthermore, I set up async function handlers (controllers.js) ...

Is it possible to trigger the JavaScript mouseover function following a click event?

Is it possible to call a function on mouse over after the first click event is triggered by the user? <a href="javascript:void(0);" id="digit<?php echo $k;?>" onClick="javascript:return swapClass('<?php echo strtoupper($v);?>',&ap ...

Where should I place an object on an NFT marker using A-Frame and AR.JS?

Struggling to find a solution for aligning the video element correctly within the NFT marker area after exploring AR.JS and AFRAME documentation without success. The issue: The positioning of the video varies on different devices with varying screen and c ...

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...

How can I dynamically update the inner content of a div using Query?

I am working with a div structure like this: <div id="time_text"></div> My goal is to retrieve the current time automatically every few seconds and update the text inside that div with the newly retrieved time. I came across this online funct ...

"Automatically scroll back to the top of the page once new content

Is there a way to automatically scroll the page to the top after content has been loaded via Ajax? Here is the code I am using to display the content: $(document).ready(function () { var my_layout = $('#container').layout(); $("a.item_l ...

iScroll 5 seems to be malfunctioning specifically when attempting to enable scroll functionality on the second page

Currently utilizing apache cordova 2.2 jquery 1.7.2 jquery mobile 1.4.3 iscroll 5 (Matteo Spinelli ~ http://cubiq.org/) The index.html setup I have is as follows: <div data-role="page" id="id1"> <div data-role="header" dat ...

Adjust the background hue of the Row in the Table

Is there a way to update the background color of a Table Row? I attempted using "BackgroundColor" but didn't see any changes Any suggestions on how to fix this issue? <TableRow style={{ backgroundColor: "#FF0000" }}> <TableCell& ...

Discovering a specific URL link element within the DOM using webdriver.io

I am currently utilizing webdriver io for conducting tests on a webpage. I am in need of verifying the existence of an element with a specific href on the page. I have attempted to achieve this using the following snippet var client = webdriverio.remote ...

Guide on utilizing automatic intellisense in a standard TextArea within a web application

I have successfully created an Online compiler web application that is currently running smoothly. However, I am now looking to enhance my application by implementing intellisense in the TextArea where the program is being typed. For instance, if I type "S ...

Intelligent programming and innovative thinking to streamline template diversity

My goal is to create multiple child websites using a base HTML/CSS template. Each child website will have unique color schemes and image variations for elements like <h> tags and background colors. I am searching for ways to easily modify the base th ...

Understanding the visibility scope in JavaScript's object-oriented programming

I have the following code snippet: function A() { this.AFunction = function() { var b = new B(); b.BFunction(); } } function B() { this.BFunction = function() { // some code $.ajax({ url: url suc ...

display the entire calendar for the chosen month

I am currently using Foundation Datepicker and Full Calendar. My requirement is as follows: 1) When I select a date in the calendar, For example, let's say it's July 2016. If I choose a date in November or any other month in the Foundation Date ...

Ways to eliminate unused classes from JQuery UI

We have successfully implemented JQuery UI library for enhancing our interface. However, since we no longer need to support outdated browsers like IE6, classes such as .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl are unnecessary and clu ...

Encountering Error with Axios in Nuxt while Navigating Pages

Working on a nuxt application utilizing axios for API calls. In my index.vue file, I have the code snippet below. <template> <div> <Hero /> <Homebooks :details="details" /> </div> </template> <s ...

Sending a JavaScript string to a PHP script from a Chrome extension content script

I am currently developing a chrome extension that is designed to extract text data from specific websites when I visit them, and then store this data in a SQL database. The JavaScript code for data extraction is functioning correctly and is able to capture ...

Unable to add new Instance Properties in Vue.js within a Laravel project

I am attempting to develop a localization property similar to __('text') in Laravel blade template. I have set up a global window variable that contains all required data under the name window.i18n Below is my resourses/js/app.js file: require(& ...

How to add rows at a particular index within another row using ng-repeat

Check out this code snippet: <tr ng-repeat="param in tags[$index].parameters"> <td class="previewParamName">{{param.name}}</td> <td> <div ng-if="is_array(param)"> &l ...

How to retrieve a value only if it is truthy in JavaScript or TypeScript - Understanding the operator

In React components, a common scenario arises with code like this: <Carousel interval={modalOpen ? null : 8000}> It would be great if I could simplify it to something along these lines (although it's not valid): <Carousel interval={modalOpen ...

What steps do I need to take to ensure that my AJAX button press request functions properly within my Django setup?

Is there a way to utilize a JavaScript string variable in a Python function and then return it back to a JavaScript variable efficiently? Perhaps using Json/ajax can help with this? To start, there is an HTML element where a string is stored: <h2 id=&q ...