在同一行和同一列中僅選擇一個復選框/單選按鈕

Question

我有六列有六個復選框（或單選）。 我的意圖是，在同一行和同一列中只能選擇一個復選框。 例如：當我選擇 column4 和 row3' 中的復選框時，必須立即取消選中 row3 和 column4 中的每個復選框。

我用單選按鈕嘗試過，但我根本做不到，因為每一個收音機總是在兩個不同的組中。

編輯：我的 HTML 代碼：

<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
 <input type="checkbox" ID="column1row1">column1row1<br>
 <input type="checkbox" ID="column1row2">column1row2<br>
 <input type="checkbox" ID="column1row3">column1row3<br>
 <input type="checkbox" ID="column1row4">column1row4<br>
 <input type="checkbox" ID="column1row5">column1row5<br>
 <input type="checkbox" ID="column1row6">column1row6<br>
 </div>

 <div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column2row1">column2row1<br>
 <input type="checkbox" ID="column2row2">column2row2<br>
 <input type="checkbox" ID="column2row3">column2row3<br>
 <input type="checkbox" ID="column2row4">column2row4<br>
 <input type="checkbox" ID="column2row5">column2row5<br>
 <input type="checkbox" ID="column2row6">column2row6<br>
  </div>

 <div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column3row1">column3row1<br>
 <input type="checkbox" ID="column3row2">column3row2<br>
 <input type="checkbox" ID="column3row3">column3row3<br>
 <input type="checkbox" ID="column3row4">column3row4<br>
 <input type="checkbox" ID="column3row5">column3row5<br>
 <input type="checkbox" ID="column3row6">column3row6<br>
 </div>

 <div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column4row1">column4row1<br>
 <input type="checkbox" ID="column4row2">column4row2<br>
 <input type="checkbox" ID="column4row3">column4row3<br>
 <input type="checkbox" ID="column4row4">column4row4<br>
 <input type="checkbox" ID="column4row5">column4row5<br>
 <input type="checkbox" ID="column4row6">column4row6<br>
 </div>

 <div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column5row1">column5row1<br>
 <input type="checkbox" ID="column5row2">column5row2<br>
 <input type="checkbox" ID="column5row3">column5row3<br>
 <input type="checkbox" ID="column5row4">column5row4<br>
 <input type="checkbox" ID="column5row5">column5row5<br>
 <input type="checkbox" ID="column5row6">column5row6<br>
 </div>


 <div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
 <input type="checkbox" ID="column6row1">column6row1<br>
 <input type="checkbox" ID="column6row2">column6row2<br>
 <input type="checkbox" ID="column6row3">column6row3<br>
 <input type="checkbox" ID="column6row4">column6row4<br>
 <input type="checkbox" ID="column6row5">column6row5<br>
 <input type="checkbox" ID="column6row6">column6row6<br>
 </div>

Answer 1

這取決於標記。 這是一個簡單的例子：

html

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

jQuery

$('input[type="checkbox"]').on('change', function() {

  // uncheck sibling checkboxes (checkboxes on the same row)
  $(this).siblings().prop('checked', false);

  // uncheck checkboxes in the same column
  $('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);

});

這是一個小提琴

這是另一個使用類的示例

Answer 2

我不確定這是否是最好的解決方案，但我認為它可以滿足您的需求。

 $(":radio").change(function() { // find column var tdColumn = $(this).closest("td"); // find row var trRow = tdColumn.closest("tr"); // uncheck all radios in current row, except the selected radio trRow.find(":radio").not($(this)).prop("checked",false); // index of current column var i = tdColumn.index(); // uncheck all radios in current column, except the selected radio trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> </tr> <tr> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> </tr> <tr> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> </tr> <tr> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> </tr> <tr> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> <td> <input type="radio" /> </td> </tr> <table>

Answer 3

我用 3 列和 5 行創建它，但它適用於N列和M 行......只需增加 td 和 tr 標簽......

嘗試這個...

你也可以在這里現場測試；）

結果

..................................................... ..................... ..................................................... ......

jQuery：

$(document).ready(function(){
    var $table = $('#MyTable');
    var $rowCount = $table.find('tr').length;
    var $colCount = $($table.find('tr')[0]).find('td').length;
    console.log($rowCount);
    console.log($colCount);
    $table.find('tr').each(function(i, e){
        $tr=$(e);
        console.log($tr);
    });
});

$(".chBox").click(function() {
    console.log('clicked');
    $this=$(this);
    $row=$this.parent().parent();
    $table=$this.closest('table');


    $row.find('.chBox').each(function(i, e){
        $checkbox=$(e);
        $checkbox.prop('checked',false);
        console.log($checkbox);
    });

    $this.prop('checked',true);

    var col = $this.parent().parent().children().index($this.parent());
    var row = $this.parent().parent().parent().children().index($this.parent().parent());
    console.log(col);
    console.log(row);

    $table.find('tr').each(function(i, e){
        $tr=$(e);
        $tr.find('.chBox').each(function(k,ex){
            $chBox=$(this);
            if(k==col && i!=row)
                $chBox.prop('checked',false);
        });

    });
});

HTML：

<table id="MyTable">
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>

    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
        <td>
            <input class='chBox' type="checkbox"/>
        </td>
    </tr>
</table>

Answer 4

使用 Angular 7 和 JavaScript 在同一行和同一列中僅選擇一個復選框/單選按鈕

這背后的想法是，使用單選按鈕，我們有 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;
}
}