Question

我有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

现在剩下的就是当Pails被选中时，我想要一个警告框来显示桶。当检查升数时，会显示一个警告框来显示升数，当加仑被检查时，会显示一个警告框来显示加仑。

Answer 1

您需要参考输入。只需添加：

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

希望得到这个帮助。

Answer 2

使用具有通用名称的单选按钮（例如 units ）和单击侦听器来执行警报。为值添加值属性，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

虽然我将侦听器委托给祖先元素。

Answer 3

你应该从html中删除onclick - 并且只使用这样的东西。但是，如果你想使用jquery会更容易，但这里是vanilla 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); 
    });  
}
})();

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

3 个答案: