通过 JQuery，如何指定 on 函数作为许多单选按钮的 onClick 处理程序？

Question

我有一个名为 handleOnClickRadio(i, j); 的函数和许多名为 id="something-radio[i][j]" 的单选按钮。所有这些单选按钮都位于名为“bigtable”的表中。

如何将函数 handleOnClickRadio() 附加到所有这些单选按钮？并使用 handleOnClickRadio(i,j) 正确调用它。

谢谢。

Answer 1

如果您有很多无线电，我建议使用委托：这样，只会附加一个事件侦听器，

请参阅 http:// api.jquery.com/delegate/

$("#globalContainer").delegate("input", "click", function(){
    //Perform a string test / regex to test if the id matches something-radio[i][j]
    //With a regex with capturing groups you can retrieve [i] and [j] values at the same time    
    if ( test($(this).attr("id")) ) {
    }
});

Answer 2

理想情况下，您应该将 onclick 分配给大表而不是每个单选按钮。 JavaScript 中的事件会冒泡，因此表（所有这些单选按钮的最终父级）将接收该事件。

因此，在 jQuery 中，您将拥有这样的代码：

$('#bigtable').click(handleOnClickRadio);

您的 handleOnClickRadio 函数的签名将是

function handleOnClickRadio(evt) {    
   var radio = evt.target;
   var id = $(radio).attr('id'); 
}

evt.target 将标识单击/选中的实际单选按钮，您也可以访问单选的其他属性。比如

$(radio).attr('id)

会给你单选按钮的id。

Answer 3

<input type="radio" class="many-radio-buttons" ....

jQuery：

$('.many-radio-buttons').click(function() {
  //your_code;
});

Answer 4

我根本不会将点击处理程序附加到按钮上。你说你有很多。将相同的事件处理程序附加到每个事件处理程序会浪费内存，甚至可能会出现性能问题。
使用事件委托代替：

$('#tableID').delegate('input[type=radio]', 'click', function() {
    // code here
});

然后你可以提取i 和 j 通过正则表达式（您也可以考虑更改模式，以便可以使用更简单的内容，例如 split())：

var exp = new RegExp("\\[(.+?)\\]\\[(.+?)\\]", 'g');
var match = exp.exec(this.id);
var i = match[1];
var j = match[2];

您可以将其放在一起，如下所示：

$('#tableID').delegate('input[type=radio]', 'click', function() {
    var match = this.id.match(/\[(.+?)\]\[(.+?)\]/)
    var i = match[1]; // use parseInt(match[1]) if you need an integer
    var j = match[2];
    handleOnClickRadio(i,j);
});

_{编辑：< /em> 让代码变得更简单。}

如果 i 和 j 对应于列和行索引，请参阅 @Caspar Kleijne 的答案作为替代方案检索它们的方法。

为了可访问性，您应该考虑将处理程序绑定到 change 事件。然后通过键盘进行的更改也将被识别。

Answer 5

像这样连接事件

 $("#bigtable input[type='radio']").bind("click", OnClickRadio);

并使用像这样的处理程序

 var OnClickRadio = function () {
    var col =  $(this).parent("td").index();
    var row =  $(this).parent("td").parent("tr").index(); 
        handleOnClickRadio(col, row)
 });

Answer 6

您可以使用简单的 jQuery 将 onClick 方法附加到表中的单选按钮集合。当您说“名为“bigtable”的表”时，我假设您的意思是它在以下代码中具有 id="bigtable"。

$(document).ready(function() {
  $("#bigtable input:radio").click(function() {
    // Your on click code here
  });
});

然而，我通常会使用 class="magicRadioButton" 为每个单选按钮指定一个特定的类，然后您的 jQuery 代码会变得更加清晰，并且不依赖于表中的所有这些单选按钮；

$(document).ready(function() {
  $(".magicRadioButton").click(function() {
    // Your on click code here
  });
});

现在，如果您需要将此信息插入到当前的 handleOnClickRadio 方法中，您可以使用以下命令来执行此操作。

$(document).ready(function() {
  $("#bigtable input:radio").click(function() {
    var button_id = $(this).attr("id");
    var re = new RegExp("\\[(.*?)\\]\\[(.*)\\]");
    var matches = re.exec(button_id);

    var i = matches[1];
    var j = matches[2];
    handleOnClickRadio(i,j);
  });
});

Answer 7

在点击触发器中将类名与 $(this) 结合起来