带有双向排他性的单选按钮

假设您需要创建一个用户界面，用户可以在其中根据最喜爱到最不喜爱的顺序对三种巧克力棒进行评分。使用单选按钮网格并不是一个糟糕的选择。

好消息是，单选按钮在其名称组中具有天然的排他性，我们可以利用这一点。坏消息是，我们有相互关联的组，并且无法仅通过 HTML 以功能的方式表达这一点。

让我们以这样一种方式设计 HTML：水平组共享相同的名称，从而自动授予排他性。我们还将添加一个 HTML data-* 属性，该属性表示列，我们将使用 JavaScript¹ 模拟垂直排他性。

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

我们的极其简单的设计可以通过以下 CSS 实现

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

如果不是因为我认为这是一个非常有用的 :empty 伪类选择器案例，我甚至不会发布这个 CSS。

现在要授予垂直组的排他性，我们将使用一点 jQuery

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);
});

当单击单选按钮时，将确定列，并关闭该列中的所有其他单选按钮，然后重新打开所单击的按钮。

这就是全部内容。

查看演示   下载文件

需要说明的是，我确实从 我之前链接的屏幕截图 中获得了这个想法，其中简要提到了这个想法，然后就被放弃了。

此外，我很想知道大家是否对“对这三种巧克力棒进行评分”有其他设计模式的想法。思考这些总是很有趣的。

---

¹ 或者，您可以通过 JavaScript 以编程方式应用数据属性，甚至根据需要动态计算列。一如既往，杀猫的方法比用黄油闷死它要多得多。