Ряды радио кнопок JavaScript

Question

Если бы я хотел иметь пару строк переключателей, используя разные имена для каждой строки, например, row1, row2 и т. Д. ... Это выглядело бы так ('o' - это переключатель);

o1 o2 o3 o4 - это будет row1

o1 o2 o3 o4 - это будет row2

Как бы я получить его, чтобы, например, первая кнопка в каждой строке 'o1 ', нельзя выбрать в обеих строках?

Я думал, что, возможно, цикл for сделает это, если я добавлю идентификаторы к переключателю.

Спасибо за любую помощь!

Answer 1

Пока две радиокнопки имеют одинаковое значение имени, их нельзя выбирать одновременно.Вы можете присвоить им разные идентификаторы, чтобы вы могли различать их в DOM, и разные значения, чтобы вы могли определить, какой из них был выбран в POST.

Answer 2

Здесь я реализовал радиокнопку Angular 7, чтобы выбрать одно значение в строке или столбце

Идея, лежащая в основе этого, заключается в том, что с помощью радиокнопки у нас есть свойство name, котороеделает одиночный выбор по строке или столбцу, но для строки и столбца.Я поместил строку в имя и обработал столбец с помощью javascript при каждом нажатии кнопки.

Это HTML-код

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

И этомой код .ts файла, где я реализовал с 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

попробуйте это -

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

так вы будете вызывать функцию -

make_radioButtons(2, 4, 1);

и увеличить интервал / отступы, чтобы увеличить расстояние между переключателями

Answer 4

Демо

Возможно, вы ищете такую ​​настройку:

группа кнопок переключателя матрицы javascript jquery

в основном он использует jquery и имена классов в качестве вторичной группировки имен

$("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;
    });
});

Answer 5

Вот пример: http://jsfiddle.net/bqsyK/

Обратите внимание, что все три переключателя имеют name='one', поэтому они являются взаимоисключающими.То же самое касается других столбцов.Каждый столбец переключателей имеет свое имя, поэтому можно выбрать несколько строк подряд.