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

Question

我有很多 table 个单选按钮，例如，这些是它们的 ID：

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

a 行默认选中，每列都组合在一起（按名称），因此如果用户选择 b3，a3 将变为未选中状态。问题是，如果用户确实点击b3，我的jquery代码returns a1，因为它是第一个单选按钮：在我的[=26=中选中].

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

这是我的 jquery 代码：

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

我能弄清楚的唯一方法是为每个组创建一个函数，但这是重复的并且违背了编码的目的，对吧？

Answer 1

因为，我们使用 name 属性对收音机进行分组，您可以使用 [name=GROUP] attribute selector.

找到按组选择的收音机

然后您使用 $(this).attr('name').

获得点击的 input 组

此外，您可以使用 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'];

但选择哪一个是品味问题。

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

Check latest checked radio button?

html

jquery

input

button

radio