javascript - 如何为多个单选按钮使用一个事件处理程序？

Question

我希望多个单选按钮(数量未知，因为它们是动态创建的)具有相同的 onClick 或 onChange 事件，以最适合的为准。我找到了 jQuery 的示例，但没有找到纯 Javascript 的示例。我应该循环处理表单上的所有单选按钮吗？

它们在 php 中是这样创建的:

//DB Connection already established 
$sql = "SELECT * FROM users";
$results = $dbConnection->query($sql);

if($result->num_rows > 0){
 while($row = $result->fetch-assoc()){
  echo "<li><input type=radio name=all_users[] value='". $row['E-Mail'] . "'/>" . $row['Name'] . " " . $row['Lastname'] . "</li>";
 }
}
else
{
  echo "<p>No users found</p>";
}

我怎样才能做那个循环？或者有更常见的方法吗？

如果其中一个被点击，我希望它们的值作为事件的参数，仅在一个函数中。

或者我应该在 php 文件中添加 onclick=myfunction(this) 吗？

Answer 1

I want multiple radio buttons (number unknown, because they get created dynamically) to have the same onClick or onChange event.

If one of them get's clicked i want their value as a parameter for the event, in only one function.

让我们假设您的 PHP 已经呈现列表项并且您有一个名为 myFunction() 的通用函数你想用它来将它的参数记录到你的控制台:

function myFunction(val){
    console.log("The value is " + val);
};

现在，如果我对您的理解正确，您希望在单击呈现的单选按钮之一时运行上述函数并传递 value 的值。被点击的单选按钮的属性作为上述功能的参数。

首先，您需要将列表中所有呈现的单选按钮分配给一个变量:

var x = document.querySelectorAll("li input");

其次，自x是对象的集合(这里，呈现的所有单选按钮)，您现在必须使用 forEach 映射 x 上的每个项目。并在运行 ClickItem() 的每个单选按钮上分配一个点击监听器函数将项目的 defaultValue 传递给它作为参数 val像这样:

x.forEach(function(radio) {
    radio.addEventListener('click', function() {
        var val = this.defaultValue;
        myFunction(val);
    });
});

jsFiddle: http://jsfiddle.net/AndrewL64/2y6eqhb0/56/

---

但是，如果通过 value ，你的意思是input之后的内容标签，但仍在各自的 li 内标签，那么你只需要像这样对上面的代码做一些小的改动:

首先，防止选择器查询li来自页面其他部分的元素，您需要使用具有唯一 ID 的 div 或 ul 包装您的列表项，如下所示:

<ul id="someList">
    //create your list items here
</ul>

其次，您需要将所有呈现的列表项分配给一个变量:

var x = document.querySelectorAll("#someList li");

第三，与我们上面所做的类似，因为x是对象的集合(这里是呈现的所有列表项)，您现在必须使用 forEach 映射 x 上的每个项目。并为运行 ClickItem() 的每个列表项分配一个点击监听器函数将项目的 innerText 传递给它作为参数 val像这样:

x.forEach(function(radio) {
    radio.addEventListener('click', function() {
        var val = this.innerText;
        myFunction(val);
    });
});

jsFiddle: http://jsfiddle.net/AndrewL64/2y6eqhb0/58/