2

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

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 编写了一个类似的函数。这适用于火狐。但是这种方法不知何故不适用于 IE。我在这里做错了吗？任何的意见都将会有帮助。我希望我可以为此使用 JQuery。但我不能。

4

1 回答 1

2

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(boolean)将元素属性设置为所需的状态。

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

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);
});
于 2017-01-28T03:59:41.697 回答