html - 检查最新检查的单选按钮？

Question

我有一个巨大的单选按钮表，例如，这些是它们的 ID:

  a1 a2 a3 a4 a5 a6
  b1 b2 b3 b4 b5 b6
  c1 c2 c3 c4 c5 c6

默认选择 a 行，并且每列都分组在一起(按名称)，因此如果用户选择 b3，a3 将变为未选中状态。问题是，如果用户确实单击b3，我的jquery代码将返回a1，因为它是我的HTML中第一个单选按钮:checked。

如何按时间顺序获取最新的 :checked 单选按钮？

这是我的 jquery 代码:

 $('#fontPicker input').on('change', function() {
   one = $("#fontPicker input[type='radio']:checked")[0]['id'];
   console.log(one);
 });

我能解决这个问题的唯一方法是为每个组创建一个函数，但这是重复的并且违背了编码的目的，对吗？

Answer 1

因为，为了对我们使用 name 属性的 radio 进行分组，您可以使用 [name=GROUP] attribute selector 找到按组选择的 radio 。 .

然后您可以使用 $(this).attr('name') 获取单击的输入组。

此外，您可以使用 input:radio selector 代替 input[type='radio'] .

请参阅下面的演示。

$('#fontPicker input').on('change', function() {
   var group = $(this).attr('name');
   var one = $("#fontPicker input:radio[name='"+group+"']:checked")[0]['id'];
   console.log(one);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="fontPicker">
  <tr>
    <td><input type="radio" name="c1" id="a1"></td>
    <td><input type="radio" name="c2" id="a2"></td>
    <td><input type="radio" name="c3" id="a3"></td>
    <td><input type="radio" name="c4" id="a4"></td>
    <td><input type="radio" name="c5" id="a5"></td>
    <td><input type="radio" name="c6" id="a6"></td>
  </tr>
  <tr>
    <td><input type="radio" name="c1" id="b1"></td>
    <td><input type="radio" name="c2" id="b2"></td>
    <td><input type="radio" name="c3" id="b3"></td>
    <td><input type="radio" name="c4" id="b4"></td>
    <td><input type="radio" name="c5" id="b5"></td>
    <td><input type="radio" name="c6" id="b6"></td>
  </tr>
  <tr>
    <td><input type="radio" name="c1" id="c1"></td>
    <td><input type="radio" name="c2" id="c2"></td>
    <td><input type="radio" name="c3" id="c3"></td>
    <td><input type="radio" name="c4" id="c4"></td>
    <td><input type="radio" name="c5" id="c5"></td>
    <td><input type="radio" name="c6" id="c6"></td>
  </tr>
</table>

当然，您可以通过多种方式来实现相同的目的:

var one = $("#fontPicker input:radio:checked").filter("[name='"+group+"']")[0]['id'];
var one = $("#fontPicker input:radio:checked").filter(function() { return $(this).attr('name') === group; })[0]['id'];

但选择哪一个取决于品味。