1

在 HTML 中，单选按钮像下面提到的 3*3 矩阵一样放置。单选按钮组提供了一个选择，即在一行和一列中，我必须只选择一个单选按钮，如果我选择另一个，则应禁用第一个选择的按钮。例如，在第二行（4,5,6）和第二列（2,5,8）中，如果我选择第 5 个单选按钮，则应取消选中（4,6）和（2,8）。如果我选​​择 1，则(2,3) 和 (4,7) 应取消选中。这意味着在 ONE ROW 和 ONE COLUMN 中应该只有一个选择.....

1,2,3

4,5,6

7,8,9

请给我您宝贵的答案，在此先感谢。

4

2 回答 2

0

具有 2 向独占性的单选按钮

此片段来自Chris Coyier 的css-tricks.com

这是在 HTML CSS 和 JS 中将其转换为 asp 控件

<table>
    <tr>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>Twix</td>
        <td><input type="radio" name="row-1" data-col="1"></td>
        <td><input type="radio" name="row-1" data-col="2"></td>
        <td><input type="radio" name="row-1" data-col="3"></td>
    </tr>
    <tr>
        <td>Snickers</td>
        <td><input type="radio" name="row-2" data-col="1"></td>
        <td><input type="radio" name="row-2" data-col="2"></td>
        <td><input type="radio" name="row-2" data-col="3"></td>
    </tr>
    <tr>
        <td>Butterfingers</td>
        <td><input type="radio" name="row-3" data-col="1"></td>
        <td><input type="radio" name="row-3" data-col="2"></td>
        <td><input type="radio" name="row-3" data-col="3"></td>
    </tr>
    </table>

table {
    border-collapse: collapse;    
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

JS

var col, el;

$("input[type=radio]").click(function() {
   el = $(this);
   col = el.data("col");
   $("input[data-col=" + col + "]").prop("checked", false);
   el.prop("checked", true);
});

演示

下载 感谢 Chris Coyier

于 2013-03-08T10:49:39.437 回答
0

这在 HTML 中是不可能的。单选按钮的作用很简单：在任何一组单选按钮中，由相同的name属性值连接，任何时候只能选中一个，选中未选中的会取消选中已选中的。而已。

目前尚不清楚最终目的是什么以及实现它的最佳方法是什么。但是如果你分析过你需要一个你描述的矩阵，那么你需要自己构建整个功能：使用一些可以切换的元素，使用 CSS 和 JavaScript，表现你描述的方式。

最好避免让元素看起来像单选按钮，因为这会产生误导：在浏览器中实现的单选按钮以某种方式工作，而让它们以不同的方式表现至少会令人困惑。

于 2013-03-08T10:51:26.287 回答