Question

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

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

感谢。

Answer 1

我根本不会将点击处理程序附加到按钮上。你说你有很多。为每个事件处理器附加相同的事件处理程序是浪费内存，甚至可能是性能问题请改用event delegation：

$('#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);
});

_{编辑：使代码更简单。}

如果i和j对应于列和行标记，请参阅@Caspar Kleijne's answer以获取检索它们的替代方法。

对于辅助功能，您应该考虑将处理程序绑定到change事件。然后也会识别通过键盘进行的更改。

Answer 2

像这样把事件连接起来

 $("#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 3

您可以使用简单的jQuery将onClick方法附加到表中的单选按钮集合。当你说'table called'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 4

在点击触发器中将这些类名与$(this)结合使用

Answer 5

理想情况下，您可以为大表分配一个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 6

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

jQuery的：

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

Answer 7

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

请参阅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")) ) {
    }
});

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

7 个答案: