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>";
}

我该如何循环？还是有其他更通用的方式？

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

还是我应该将onclick=myfunction(this)添加到php文件中？

Answer 1

实际上，JQuery使它变得更容易，但是您可以使用纯JS进行相同的操作。真正的概念是捕获事件冒泡，请尝试以下操作：

fatherElement =>不是动态的元素

fatherElement.addEventListener("click", function(event){ 
    if(event.target.type == 'radio'){
        //do something
    }
});

Answer 2

使用此echo行代替您的行：

echo "<li><input onchange='yourOnChange(event)' type=radio name=all_users[] value='". $row['E-Mail'] . "'/>" . $row['Name'] . " " . $row['Lastname'] . "</li>";

我在此处添加onchange='yourOnChange(event)'。当然，请记住在网页中添加适当的js函数，例如function yourOnChange(e) { console.log(e); }。

Answer 3

还是我应该将onclick = myfunction（this）添加到php文件中？

是的，您可以这样做。在这种情况下，代码将是;

<li><input onclick='myclick('". $row['E-Mail'] ."')' type=radio name=all_users[] value='". $row['E-Mail'] . "'/>" . $row['Name'] . " " . $row['Lastname'] . "</li>"

现在JS代码myclick(email)中的函数可以处理任何带有email参数的内容。

纯JS解决方案：

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'radio') {
        if(inputs[i].checked)
        {
             //if radio button is checked
             myClick(inputs[i].id, 'checked')  //you can get anything apart from id also
        }
        else
        {
             //if radio button is not checked
             myClick(inputs[i].id, 'unchecked')    //you can get anything apart from id also
        }
    }
}

myClick(id, stat)
{
    //YAY!! I have got the id
}

Answer 4

使用纯JS，您可以选择单选按钮并添加事件监听器，如下所示：

const radios = document.querySelectorAll('input[type=radio]');

radios.forEach(radio => radio.addEventListener('change', e => {
   // radio is your radio button element
});

与jQuery相同：

$('input[type=radio]').change(() => {
   //your code goes here
});

Answer 5

我希望多个单选按钮（数字是未知的，因为它们是动态创建的）具有相同的onClick或onChange事件。

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

让我们假设您的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是对象的集合（此处是所有呈现的列表项），因此您现在必须映射所有对象x使用forEach，并在每个运行ClickItem()函数的列表项上分配一个点击侦听器，将其项innerText作为参数val传递给它，如下所示：

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

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

Answer 6

如果有for of，则可以进行querySelectorAll循环。

这里是一个例子：

const radios = document.querySelectorAll('input[type=radio]');
for (const element of radios ) {element.addEventListener('click', function(event) {
  console.log(event.currentTarget)
})
}

如何将一个事件处理程序用于多个单选按钮？

6 个答案: