Choosing between radio buttons either horizontally or vertically within a table

Here is the markup I am working with:

<table>
  <tr>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
  </tr>
</table>

I have a 3x3 table with 9 radio buttons. I am trying to set it up so that:

  • You can select only one radio button per row OR
  • You can select only one radio button per column

Is there a way to achieve this without using any JavaScript? Appreciate any help, thank you!

javascripthtmlcssradio-button

Answer №1

To ensure only one input can be checked in each row or column, you can assign the same name to all inputs within the desired row or column.

One per row

<table>
  <tr>
    <td><input type="radio" name="radio1"></td>
    <td><input type="radio" name="radio1"></td>
    <td><input type="radio" name="radio1"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio2"></td>
    <td><input type="radio" name="radio2"></td>
    <td><input type="radio" name="radio2"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio3"></td>
    <td><input type="radio" name="radio3"></td>
    <td><input type="radio" name="radio3"></td>
  </tr>
</table>

One per column

<table>
  <tr>
    <td><input type="radio" name="radio1"></td>
    <td><input type="radio" name="radio2"></td>
    <td><input type="radio" name="radio3"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio1"></td>
    <td><input type="radio" name="radio2"></td>
    <td><input type="radio" name="radio3"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio1"></td>
    <td><input type="radio" name="radio2"></td>
    <td><input type="radio" name="radio3"></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

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3. In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3. I want to dynamically pu ...

javascriptangularjstypescriptstring-interpolation

Mocha test failing to trigger function execution

I've been developing an Express.js application that includes a feature for creating appointments with a post request. This feature involves retrieving and saving data from a third-party API, followed by sending updated API data in the subsequent reque ...

javascriptexpressmocha.js

Is it possible to store a JWT token in local storage when working with Next.js?

We are considering using Next.js for our application, with a focus on client-side rendering for data fetching. The API we will be interacting with is external and requires authentication to access specific user dashboard content. While the homepage will ...

javascriptreactjsapinext.js

The inclusion of <script> tag within the response received from an Ajax

Is there a way to update an element's innerHTML using Ajax.request that includes <script> tags? <div><script type="text/javascript">javascript</script></div> I want to update the content of a div with code from above wi ...

javascriptjqueryajaxprototypejs

Angular 2 with a jssor slider that adjusts seamlessly to different screen

After following the guidance provided in this answer on incorporating jssor into angular2, I have implemented the following JavaScript code snippet in a file and referenced it in angular-cli.json. jssor_1_slider_init = function() { var jssor_1_op ...

javascriptangularjssor

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

javascriptcssangulartypescript

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Encountering issues with an async function. In the ../lib folder, I have a class for handling data from an API website. However, when attempting to load the API data within an async function, I encounter difficulties. The async function does not return a ...

javascripttypescriptapinext.js

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the cl ...

csscss-animationskeyframe

Guide to displaying radio button value when updating a record

When updating a record in Node.js, I encounter an issue where the values for text input fields are rendered correctly, but the values for radio buttons and textarea in the update form do not appear. Can someone please advise on how to implement this? I am ...

javascriptmysqlnode.jsexpresshandlebars.js

Discover the Magic of Jquery Hover Effect Unleashed

$('.outerBox').hover( function() { $(this) > $('.innerBox').stop(); $(this) > $('.innerBox').slideDown(750); }, function() { $(this) > $('.innerBox').stop(); $(this) > $(&apos ...

jqueryhtmlcss

The imgAreaSelect plugin is up and running successfully. Now, I am looking to utilize the x and y coordinates to make updates to the image stored in the database. How can I

After retrieving the dimensions and coordinates from the jQuery plugin imgAreaSelect, I am looking for guidance on how to update the image in my database based on this selection. The database contains a tempImage and Image field, and my goal is to allow ...

javascriptjqueryjquery-plugins

Using Reactjs to automatically populate text into a React-Select Input field

I have implemented react-select in my project. Sometimes, I encounter the need to update my react-select input field without directly interacting with it (such as injecting text into it). However, I am unable to find a proper way to achieve this based on ...

javascriptjquerynode.jsreactjsreact-select

The functionality of the Bootstrap 4 Carousel featuring multiple items is experiencing malfunctions

I'm encountering an issue with my Bootstrap 4 card carousel. When the next or prev buttons are clicked, there is a strange transition effect. Additionally, in the mobile version, the buttons do not work properly. It seems that when the card slides to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Javascript leaping across intervals

I'm currently working on creating a unique JavaScript slideshow with a customized pause interval for each slide. Let's say I have a slideshow with 3 slides and I want the pause intervals to be as follows: 30 seconds 8 sec 8 sec |---- ...

javascriptjquery

Confirm that only the days of the present month are eligible for selection

I have been given the responsibility of validating a date field that is populated when an invoice is created. The date field consists of a text box and three button objects allowing users to select a date from a calendar, input today's date, or remove ...

javascripthtmlvb.net

Unraveling the Mystery of jQuery AJAX Response: Where Have I Gone Astray?

$.ajax({ type: 'POST', url: 'place/add', data: { lat: 45.6789, lng: -123.4567, name: "New Place", address: "123 Main St", phone: "555-1234", review: "Great place!", cat ...

javascriptjqueryajaxdebuggingjson

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Currently, I am working on creating a mobile website where I plan to include some YouTube videos using the IFrame player API (https://developers.google.com/youtube/iframe_api_reference). My main goal is to have the video start playing only after the user ...

javascripthtmlgoogle-chromemobileyoutube

When the text is long, it does not extend all the way to the right

I am working on designing a login page and have created an input text field for the user's email address. However, I have noticed that when the email address is long, there is some space left at the end of the border (I suspect it may be due to paddin ...

htmlcss

The operation of executing `mongodb - find()` does not exist as a function

I am having trouble printing all documents from the "members" collection. I attempted to use the find() function, but encountered an error stating that find() is not a function. Here is a snippet from member_model.js located in the models/admin folder: v ...

javascriptnode.jsexpressmongoose

What steps do I need to follow in order to create an AJAX application that functions similarly to node

As someone new to ajax, I am facing challenges while trying to create a forum software similar to nodebb. Despite having developed a php forum previously, its outdated appearance prompted me to seek alternatives like nodebb for a more modern look and feel. ...

javascriptphpjqueryhtmlajax