Javascript 在同一行和同一列中仅选择一个复选框/单选按钮_Javascript_Jquery_Html_Checkbox_Radio

Javascript 在同一行和同一列中仅选择一个复选框/单选按钮

javascript jquery html checkbox

Javascript 在同一行和同一列中仅选择一个复选框/单选按钮,javascript,jquery,html,checkbox,radio,Javascript,Jquery,Html,Checkbox,Radio,我有六列和六个复选框（或收音机）。我的意图是，在同一行和同一列中只能选择一个复选框。例如：当我选中第4列和第3列中的复选框时，必须立即取消选中第3行和第4列中的每个复选框我用单选按钮试过，但我就是做不到，因为每个单选电台总是在两个不同的组中编辑：我的HTML代码： <div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" > <input type="checkbox" I

我有六列和六个复选框（或收音机）。我的意图是，在同一行和同一列中只能选择一个复选框。例如：当我选中第4列和第3列中的复选框时，必须立即取消选中第3行和第4列中的每个复选框

我用单选按钮试过，但我就是做不到，因为每个单选电台总是在两个不同的组中

编辑：我的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>


第1列箭头1

第1列箭头2

第1列箭头3

第1列箭头4

第1列箭头5

第1列箭头6

第2列箭头1

第2列箭头2

第2列箭头3

第2列箭头4

第2列箭头5

第2列箭头6

第3列第1行

第3列第2行

第3列第3行

第3列第4行

第3列第5行

第3列第6行

第4列第1行

第4列第2行

第4列第3行

第4列第4行

第4列第5行

第4列第6行

第5列第1行

第5列第2行

第5列第3行

第5列第4行

第5列第5行

第5列第6行

第6列第1行

第6列第2行

第6列第3行

第6列第4行

第6列第5行

第6列第6行

这取决于标记。下面是一个简单的例子：

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>

我不确定这是否是最好的解决方案，但我认为它符合你的要求

$（“：radio”）.change（函数（）{
//查找列
var tdColumn=$（此）；
//查找行
var trRow=tdColumn.closest（“tr”）；
//取消选中当前行中除所选收音机以外的所有收音机
trRow.find（“：radio”）.not（$（this））.prop（“选中”，false）；
//当前列的索引
var i=tdColumn.index（）；
//取消选中当前列中除所选收音机以外的所有收音机
trRow.slides（“tr”）.each（函数（键，值）{$（值）.find（“：radio”）[i]。checked=false；}）；
});
我用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);
        });

    });
});

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

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

    });
});

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

使用Angular 7和JavaScript在同一行和同一列中仅选择一个复选框/单选按钮
这背后的想法是，使用单选按钮，我们有name属性，它可以按行或列进行单选，但同时按行和列进行单选。每当按钮点击时，我就用javascript将行放在name和handled列中
这是HTML代码
你能发布你的HTML代码吗？在@billyonecan，很好地完成后发布一个答案。不知何故，我不为我工作，我不知道为什么。列有效，但行无效。这是我的例子：我用你的例子来处理类，效果很好！非常感谢你。其他用户的回答很好，谢谢。我认为这是最好的答案，因为它是最快和非常低的代码。
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;
}
}