input radio button vertical and horizontal

Question

I want a form where someone choose a unique value of radio buttons vertical and horizontal (you'll see below what i mean). I know tha i can do it with name. In my code below you see same name in vertical.

Here's my code

<tr>
    <td style="text-align:left;">tracking_url</td>
    <td><input type="radio" name="tracking_url" value="image_url"></td>
    <td><input type="radio" name="pr_image" value="tracking_url"></td>
    <td><input type="radio" name="availability" value="tracking_url"></td>
    <td><input type="radio" name="pr_price" value="tracking_url"></td>
    <td><input type="radio" name="pr_final_price" value="tracking_url"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">image_url</td>
    <td><input type="radio" name="tracking_url" value="image_url"></td>
    <td><input type="radio" name="pr_image" value="image_url"></td>
    <td><input type="radio" name="availability" value="image_url"></td>
    <td><input type="radio" name="pr_price" value="image_url"></td>
    <td><input type="radio" name="pr_final_price" value="image_url"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">availability</td>
    <td><input type="radio" name="tracking_url" value="availability"></td>
    <td><input type="radio" name="pr_image" value="availability"></td>
    <td><input type="radio" name="availability" value="availability"></td>
    <td><input type="radio" name="pr_price" value="availability"></td>
    <td><input type="radio" name="pr_final_price" value="availability"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">price</td>
    <td><input type="radio" name="tracking_url" value="price"></td>
    <td><input type="radio" name="pr_image" value="price"></td>
    <td><input type="radio" name="availability" value="price"></td>
    <td><input type="radio" name="pr_price" value="price"></td>
    <td><input type="radio" name="pr_final_price" value="price"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">full_price</td>
    <td><input type="radio" name="tracking_url" value="full_price"></td>
    <td><input type="radio" name="pr_image" value="full_price"></td>
    <td><input type="radio" name="availability" value="full_price"></td>
    <td><input type="radio" name="pr_price" value="full_price"></td>
    <td><input type="radio" name="pr_final_price" value="full_price"></td>
    <td></td>
</tr>

This is how i want to use radio buttons

but also someone can use radio buttons like

Is there any way to do it with html or javascript??

Answer 1

var col, el;
    
$("input[type=radio]").click(function() {
    el = $(this);
    col = el.data("col");
    $("input[data-col=" + col + "]").prop("checked", false);
    el.prop("checked", true);
});

table {
    border-collapse: collapse;    
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table>
<tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<tr>
    <td>Twix</td>
    <td><input type="radio" name="row-1" data-col="1"></td>
    <td><input type="radio" name="row-1" data-col="2"></td>
    <td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
    <td>Snickers</td>
    <td><input type="radio" name="row-2" data-col="1"></td>
    <td><input type="radio" name="row-2" data-col="2"></td>
    <td><input type="radio" name="row-2" data-col="3"></td>
</tr>
<tr>
    <td>Butterfingers</td>
    <td><input type="radio" name="row-3" data-col="1"></td>
    <td><input type="radio" name="row-3" data-col="2"></td>
    <td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>

https://css-tricks.com/radio-buttons-with-2-way-exclusivity/

Answer 2

Here I implemented in Angular 7 input radio button vertically and horizontal

The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.

This is HTML CODE

<section class="editor">
 <strong>Editor</strong>
  <div>
   <label>Add option</label>
   <button (click)="addOption()">+</button>
  <div *ngFor="let option of options;let i = index">
  <span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)" 
    *ngIf="options.length>2">X</button>
  </div>
 </div>
</section>
<hr>
<section>
 <strong>Builder</strong>
  <div class="builder">
    <label>Question title goes here</label><br>
    <div *ngFor="let option of options;let row_index = index">
     <span>{{option.title +(row_index+1)}}</span>
     <span *ngFor="let rank of options;let column_index=index">
       <input type="radio" name="{{row_index}}" class="{{column_index}}" 
         (click)="check(column_index,$event)">
     </span>
   </div>   
  </div>
</section>

And this is my .ts file code where I Implemented with Javascript

export class AppComponent {
  options = [{
  title: "option",
  rank: 0,
}, {
 title: "option",
 rank: 0
}]
constructor() {

 }
  ngOnInit(): void { }
 addOption() {
  this.options.push({
  title: "option",
  rank: 0
  })
 }
deleteOption(i) {
  this.options.splice(i, 1);
}
check(column_index, event) {

Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}

Answer 3

I think it would be better to use checkboxes. And control if other checkboxes could be checked or not using javascript.

Answer 4

The radio buttons within a row need to have the same name="nameValue" value. The value fields can be different for each radio button.