单选按钮多维数组

Question

我正在使用单选按钮。

<input type="radio" value="1" name="report[1][AP]">
<input type="radio" value="2" name="report[1][AP]">

<input type="radio" value="1" name="report[1][DCI]">
<input type="radio" value="2" name="report[1][DCI]">

<input type="radio" value="1" name="report[2][AP]">
<input type="radio" value="2" name="report[2][AP]">

<input type="radio" value="1" name="report[2][DCI]">
<input type="radio" value="2" name="report[2][DCI]">

如果 report[1][AP] 被选中，那么 report[1][DCI] 也应该被选中，或者如果 report[1][DCI] 被选中，那么 report[1][AP] 也应该被选中。

同样的；

如果报告[2][AP] 被检查，那么报告[2][DCI] 也应该被检查，或者如果报告[2][DCI] 被检查那么报告[2][AP] 也应该被检查。

我该怎么办？

我正在使用这个：

$('input[type="radio"]').on('click', function(){
    var found = $(this).attr('name');
    var founds = found.substring(0, found.indexOf(']'))+"]";
    $("input[type="+founds+"]").prop('required',true);
});

错误：语法错误，无法识别的表达式：输入[type=report_time[1]]

Answer 1

这里我在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;
}
}

Answer 2

试试这样的..

$('input[type="radio"]').on('click', function(){
    var namePattern = /([a-z]*)(\[[0-9]\])(\[[A-Z]*\])/i;
    var found = $(this).attr('name').match(namePattern);

    var required = '[AP]';
    if(found[3] === '[AP]') {
        required = '[DCI]';
    }

    var reqButtonName = found[1] + found[2] + required;
    var reqButtonWithValue1 = $('[name="' + reqButtonName + '"]')[0];
 // $(reqButtonWithValue1).prop('checked', 'checked');
    $(reqButtonWithValue1).prop('required', 'required');
});

这将检查带有value=1的单选按钮[DCI]/[AP]