Question

我正在尝试制作两个复选框，其中只能在任何时间点选择一个复选框。我在论坛上搜索了很多，并找到了一些建议。

if (document.attachEvent){
// For IE Browsers.
document.attachEvent("DOMContentLoaded", function (event) {

    var saSelector = document.querySelector('input[name=saWrite]');
    var cgSelector = document.querySelector('input[name=cgWrite]');

    if (cgSelector !== null) {
        cgSelector.attachEvent('change', function (event) {
            if (cgSelector.checked) {
                document.querySelector('input[name=saWrite]').checked = false;
            }
        }); 
    }

    if (saSelector !== null) {
        saSelector.attachEvent('change', function (event) {
            if (saSelector.checked) {
                document.querySelector('input[name=cgWrite]').checked = false;
            }
        }); 
    }       
});
}

我用addEventListener代替了非IE浏览器的attachEvent编写了一个类似的函数。这适用于Firefox。但是这种方法在某种程度上对IE不起作用。我在这里做错了吗？任何的意见都将会有帮助。我希望我可以使用JQuery。但我不能。

Answer 1

https://jsfiddle.net/20g7ym8q/

你说你想使用JQuery，但你不能。我意识到这可能看起来像是一个真正的限制，但它并非如此。你可以用JQuery做任何事情，你可以用JavaScript做。

您的代码无法在IE11上运行，因为已弃用并删除了attachEvent，转而接受addEventListener作为在所有现代浏览器中附加事件的标准方法。如果您在没有JQuery且没有代码重复的情况下寻找世代支持，那么设置自己的Object作为代码和浏览器之间的中间层可能是解决此问题的最佳方式。

 function $(ele) {
  return {
    ele: document.querySelector(ele),
    on: function(ev, fn) {
      (document.attachEvent) ? 
      this.ele.attachEvent(ev, fn) :
      this.ele.addEventListener(ev, fn);
    },
    checked: function(change) {
     if(typeof change !== undefined) this.ele.checked = change;
     return this.ele.checked;
    }
  }
}

以上是一个返回带有两个方法和一个属性的Object的函数。它的工作方式类似于JQuery的熟悉性和一致性，但它没有包含整个JQuery库的开销。

这些方法允许您使用.on添加事件类型和函数作为参数的事件。这些方法还允许您设置或获取指定元素的checked属性。 .checked()只会返回一个关于框是否被选中的布尔值，.checked(boolean)会将elements属性设置为所需的状态。

在实践中，要解决只有一个允许复选框的困境，你可以这样做：

var sa = $('input[name="saWrite"]');
var cg = $('input[name="cgWrite"]');

cg.on('click', function(ev) {
  sa.checked(false)
});

sa.on('click', function(ev) {
  cg.checked(false);
});

AttachEvent在IE11上不起作用

1 个答案: