单选按钮行 JavaScript

Question

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

o1 o2 o3 o4 - 这将是第 1 行

o1 o2 o3 o4 - 这将是 row2

我怎样才能得到它，例如，每行 'o1' 上的第一个按钮，不能在两行上都被选中？

我在想，如果我在单选按钮上添加 id，也许 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>

这是我用 Javascript 实现的 .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;
}
}