在一组复选框中的每个选定复选框上显示警报

display alert on each selected check box from a group of checkboxes

本文关键字：复选框 显示 一组      更新时间：2023-09-26

我有3个复选框，我希望它们执行某些操作，即当选中它们时显示一个警告框，当选中一个复选框时，应该取消选中其他复选框。

我已经能够让第二部分发挥作用，一次只能选中一个复选框，但我似乎无法让显示警报框的第一部分发挥作用。

js，确保在任何时候只选中一个框：

function qtyBox(e) {
  var c = document.getElementsByClassName("qty");
    for (var i = 0; i < c.length; i++) {
      c[i].checked = false;
     }
     e.checked = true;
 }

html:

<input class="qty" type="checkbox" id="pails" onchange="qtyBox(this)"/>Pails
<input class="qty" type="checkbox" id="liters" onchange="qtyBox(this)"/>Liters
<input class="qty" type="checkbox" id="gallons" onchange="qtyBox(this)"/>Gallons

现在剩下的就是当"桶"被选中时，我想要一个显示桶的提醒框。选中"升"时，一个显示"升"的报警框；选中"加仑"时，另一个显示加仑的报警框。

您需要获得对输入的引用。只需添加：

var currId = e.id;
if(currId === "pails") alert("Pails");
else if(currId === "liters") alert("Liters");
else if(currId === "gallons") alert("Gallons");

所以它变成了：

function qtyBox(e) {
   var c = document.getElementsByClassName("qty");
   for (var i = 0; i < c.length; i++) {
      c[i].checked = false;
   }
   e.checked = true;     
   var currId = e.id;
   if(currId === "pails") alert("Pails");
   else if(currId === "liters") alert("Liters");
   else if(currId === "gallons") alert("Gallons");
}

希望得到帮助。

使用具有通用名称的单选按钮（例如单元）和单击侦听器来执行警报。为值添加一个值属性，一个ID似乎是多余的：

<input class="qty" name="units" type="radio" value="pails" onclick="alert(this.value)">Pails
<input class="qty" name="units" type="radio" value="litres" onclick="alert(this.value)">Litres
<input class="qty" name="units" type="radio" value="gallons" onclick="alert(this.value)">Gallons

尽管我会将侦听器委托给祖先元素。

您应该从html中删除onclick，然后使用类似的东西。然而，如果您想使用jquery会更容易，但这里是普通的javascript解决方案。（在js文件中或包装在脚本标记中）

(function(){
var inputs = document.getElementsByClassName('qty'); 
for(i=0; i<inputs.length; i++){
    var el = inputs[i];
    el.addEventListener('click', function(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].checked = false;
         }
         this.checked = true
         alert(this.id); 
    });  
}
})();
相关文章：