Rows of Radio Buttons JavaScript

If I wanted to have a couple of rows of radio buttons, using a different name for each row e.g. row1, row2 etc... It would look like this (the 'o' is a radio button);

o1 o2 o3 o4 - This would be row1

o1 o2 o3 o4 - This would be row2

How would I get it so that for example, the first button on each row 'o1', can't be selected on both rows?

I was think开发者_开发问答ing maybe a for loop would do it if I added ids to the radio button.

Thanks for any help!

As long as two radio buttons have the same name value, they cannot be selected at the same time. You can give them different IDs so that you can distinguish between them in the DOM, and different values so that you can determine which one was selected on POST.

Demo

You might be looking for a setup like this:

radio button matrix group javascript jquery

basically it uses jquery and class names as a secondary name grouping

$("input").click(function(){
    $("input."+this.className).not($(this)).each(function(){
        this.checked = false;
    });
    $("input:not([name='"+this.name+"'])").each(function(){
        if ($("input[name='"+this.name+"']:checked").length < 1)
            if($("input."+this.className+":checked").length < 1)
                this.checked = true;
    });
});

Here is an example: http://jsfiddle.net/bqsyK/

Note that the three radio buttons all have name='one' so they are mutually exclusive. The same goes for the other columns. Each column of radio buttons has a different name though so more than one in a row can be selected.

try this -

    function make_radioButtons(rows, columns, disable_no)
    {
      var k=1;
      document.write('<table cellspacing="0" cellpadding="0" border="0">');
      for(i=1; i<=rows; i++)
      {
        document.write('<tr>');
        for(j=1; j<=columns; j++) 
        {  
           if(j==disable_no)
           {
            document.write('<td><input type="radio" disabled="true" name="radio' + k + '">RadioButton' + k + '</td>');
            k++
           }
           else
           {
            document.write('<td><input type="radio" name="radio' + k + '">RadioButton' + k + '</td>');
           k++;
           }
        }
        document.write('</tr>');
      }
      doucument.write('</table>');
    }

this is how you'll call the function -

make_radioButtons(2, 4, 1);

and increase spacing/padding to increase space between radio buttons

Here I implemented in Angular 7 Radio button to select the single value in either row or column

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;
}
}