Question

如果我想要几行单选按钮，每行使用不同的名称，例如row1，row2等......它看起来像这样（'o'是一个单选按钮）;

o1 o2 o3 o4 - 这将是row1

o1 o2 o3 o4 - 这将是row2

如何才能获得它，例如，每行'o1'上的第一个按钮都不能在两行中选择？

我想如果我将ids添加到单选按钮上，也可以使用for循环。

感谢您的帮助！

Answer 1

只要两个单选按钮具有相同的名称值，就不能同时选择它们。您可以为它们提供不同的ID，以便您可以在DOM中区分它们和不同的值，以便您可以确定在POST上选择了哪一个。

Answer 2

以下是一个示例：http://jsfiddle.net/bqsyK/

请注意，三个单选按钮都有name='one'，因此它们是互斥的。其他列也是如此。每列单选按钮都有不同的名称，但可以选择连续多行。

Answer 3

Demo

您可能正在寻找这样的设置：

radio button matrix group 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 4

试试这个 -

    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 5

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

这是我使用Java脚本实现的.ts文件代码

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

数字行按钮JavaScript

5 个答案:

Demo