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

Passing a variable using a button's value attribute in jQuery

My goal is to develop a form in my application where users can input their name and address. Once the user enters the information, I need to validate it and add it to an array before submitting it to the PHP function. Additionally, I want to provide users ...

jqueryhtmlbutton

Having trouble with $.post request to a different domain in a node.js/express app running on port 8081

Whenever I try to use $.post, I keep getting the error message POST https://thewebsite.com 400 (Bad Request). Here is the code snippet that's causing the issue: $.post("https://website.com/blabla", { domain: "infoinfo.com", room: "someInfo", ap ...

javascriptjquerynode.jsexpress

Easy task tracker in Vue.js

I’m currently delving into the world of VueJS and working on a simple to-do list application. The issue I’m facing is that I can't seem to successfully pass an array to the child component responsible for displaying the list: Parent Component < ...

javascriptarraysvue.jsobjectvue-component

Develop a feature within a standard plugin that allows users to add, remove, or refresh content easily

I have developed a simple plugin that builds tables: ; (function ($, window, document, undefined) { // Define the plugin name and default options var pluginName = "tableBuilder", defaults = { }; // Plugin constructor func ...

javascriptjquery

Delivering Background Videos with Node.JS

Apologies if my question seems off base or confusing, as I am not very knowledgeable in the world of nodejs. I have been comfortable using just plain PHP and Apache for a while until I discovered ZURB Foundation's stack with Handlebars and SASS, along ...

javascriptnode.jshtmlvideobackground

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

My NextJs app has a products page that should render dynamic routes statically using generateStaticParams(). However, this functionality does not work as expected. When I run "npm run build," it only generates 3 static pages instead of the expected number. ...

javascripthtmlreactjstypescriptnext.js

Encountered an error while web crawling in JavaScript: Error - Connection timeout

I encountered an error while following a tutorial on web crawling using JavaScript. When I execute the script, I receive the following errors: Visiting page https://arstechnica.com/ testcrawl ...

javascriptnode.jsnpmweb-crawler

retrieve information at varying intervals through ajax

In my web page, there are two div elements that both fetch server data using AJAX. However, div-a retrieves data every second while div-b retrieves data every minute. How can I adjust the frequency at which each div fetches server data? ...

javascriptajax

How can I use JavaScript or JQuery to retrieve the HTML content as a string from a specific URL?

How can I extract the URL of a link from a webpage and add it to my code without an ID for that specific link? Is there a way to search based on the content within the <a> tag? ...

javascriptjqueryhtmlajax

The functionality of jquery .serialize is not effective when used on forms that are generated dynamically

Currently, I am utilizing Java/Spring within a .jsp file. The issue arises when attempting to dynamically load a form (including form tags) from myForm.jsp into a div in myPage.jsp and making an ajax post call with the data. Upon using jQuery .serialize a ...

jqueryhtmljsp

I am attempting to load the ajax content into separate divs simultaneously

When I attempt to load the ajax into two separate divs, I notice that despite calling for data to be placed in two different divs within the ajax code, it all ends up in one div. <script>$(document).ready(function(){ $.ajax({ url: "http: ...

javascriptjqueryhtmlajax

Guide on importing images from directories in Vue

As I delve into learning vue.js, a particular issue has surfaced. I am in the process of creating an SFC and encountering difficulties with loading images from the 'src / assets / logo.png' folder. Below is the code snippet: <template> & ...

javascriptvue.jswebpackvuejs2vue-cli

How can an array of file paths be transformed into a tree structure?

I am looking to transform a list of file and folder paths into a tree object structure (an array of objects where the children points to the array itself): type TreeItem<T> = { title: T key: T type: 'tree' | 'blob' childr ...

javascriptnode.jstypescript

Learn the process of sending information to a MySQL table using a select tag in PHP

I am attempting to use a select tag to submit data to a MySQL table using PHP. I have been successful in inserting data using the text type with the following code: <td> <label class="control-label">Image Type </label> </td> &l ...

phphtml

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

Incorporate relationships while inserting data using Sequelize

vegetable.js ... var Vegetable = sequelize.define('Vegetable', { recipeId: { allowNull: false, ... }, name: { ... }, }); Vegetable.association = models => { Vegetable.belongsTo(models.Recipe); }; ... recipe.js ... var Recipe = sequeliz ...

javascriptnode.jsexpresssequelize.js

What is the best way to accomplish a smooth transition of background colors similar to this design

I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...

javascriptjqueryhtmlcss

Using jQuery to load HTML response into entire page

When working with my ajax code, I receive a html response. Is there a way to entirely replace the current page with this html response? So far, I have only come across window.location.href, which simply redirects to the url response. Here is a snippet of ...

javascriptjqueryajaxweb

Can you iterate through two arrays to find common values?

Upon examining my firebase database, I found the following structure: Users { askdfasdf: John: { Selection: [1,2,3] }, fasfadffe: Mark: { Selection: [1,2,4] } } Players { { name: &apos ...

javascriptangularjsarraysweb-applicationsfirebase-realtime-database

Running multiple instances of setTimeout() in JQuery

I'm looking for a way to delay the execution of 10 lines of independent jQuery code with 2 seconds between each line. I initially tried using setTimeout() on each line, but is there a more elegant solution for this scenario? The jQuery DELAY method do ...

javascriptjquerydelaysettimeout