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中检查。

如何按时间顺序获取最新的：已选中的单选按钮？

这是我的jquery代码：

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

我能弄明白的唯一方法就是为每个小组制作一个功能，但是重复这个功能会破坏编码的目的，对吗？

Answer 1

由于我们使用name属性对无线电进行分组，您可以使用[name=GROUP] attribute selector找到按组选择的内容。

您可以使用input获得所点击的$(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'];

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

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

1 个答案: