JavaScript selectAll\deselectAll 复选框功能在 IE8 上不起作用

发布于 2025-01-05 23:09:09 字数 2898 浏览 1 评论 0原文

我有一个为 Alfresco 应用程序开发的 Webscript(.js 文件)。它处理一个按钮,该按钮显示一个表单,旨在选择已订阅 Alfresco 空间的成员,以便向他们发送邮件。
所有复选框都是使用订阅者姓名动态生成的。
您可以选中任何您想要的成员,并且您还有一个特殊的复选框,使您可以选择或取消选择所有成员。
此特定复选框在 Chrome 和 Firefox 上可以正常工作。
但是,当您在 Internet Explorer 8 上检查它时,无论是否检查其名称,都不会选择或取消选择任何成员。
下面是表单生成和选中复选框时触发的 onClick 函数的代码示例:

   updateMembersList : function TS_updateMembersList(containerId)
   {
       var div = Dom.get(containerId);
       div.innerHTML = "<div class=\"memberDiv\">" +
           "<input type=\"checkbox\" id=\"selectDeselectAllCb\" checked=\"true\" onchange=\"YAHOO.Bubbling.fire('selectDeselectAllChanged')\" class=\"memberCb\"/>" +
           "<label for=\"selectDeselectAllCb\" class=\"memberLabel\">" + 
           this.msg('label.selectDeselectAll') + "</label>" +
           "</div>";

       for (var i=0; i<this.members.length; i++)
       {
           var member = this.members[i];
           var avatar = Alfresco.constants.URL_CONTEXT + "/components/images/no-user-photo-64.png";

           if (member.authority.avatar && member.avatar != "")
           {

               avatar = Alfresco.constants.PROXY_URI + member.authority.avatar + "?c=force";
           }
           div.innerHTML += "<div class=\"memberDiv\">" +

                "<input type=\"checkbox\" id=\"cb_" + member.authority.userName + "\" checked=\"true\" onchange=\"YAHOO.Bubbling.fire('selectDeselectMemberChanged')\" class=\"memberCb\"/>" +
                "<label for=\"cb_" + member.authority.userName + "\" class=\"memberLabel\">" + 
                        member.authority.firstName + " " + member.authority.lastName + "</label>" +
                "</div>";
       }
   },


   selectDeselectAllChanged: function selectDeselectAllChanged(){
       var selectDeselectAllCb = Dom.get('selectDeselectAllCb');
       var checked = selectDeselectAllCb.checked;
       console.log("Select All");
       var cbs = YAHOO.util.Selector.query("input[id^='cb_']");

       for (var i=0, j=cbs.length; i<j; i++)
       {
           var cb = cbs[i];
           cb.checked = checked;
       }
   },

   selectDeselectMemberChanged: function selectDeselectMemberChanged(){
       var selectDeselectAllCb = Dom.get('selectDeselectAllCb');
       var cbs = YAHOO.util.Selector.query("input[id^='cb_']");

       var firstChecked;
       if (cbs[0] != null){
           firstChecked = cbs[0].checked;
       }

       for (var i=0, j=cbs.length; i<j; i++)
       {
           var cb = cbs[i];
           if (cb.checked === firstChecked){
               continue;
           }
           else{
               selectDeselectAllCb.checked = false;
               return;
           }
       }
       selectDeselectAllCb.checked = firstChecked;
   },

一开始,我以为 IE8 不支持该查询,但事实并非如此。
IE7 及更新版本支持这种语法。

I have a Webscript (.js file) developed for an Alfresco application. It handles a button that displays a form aimed at selecting members which have subscribed to an Alfresco space, in order to send them a mail.
All the checkboxes are generated dynamically with the subscribers names.
You can check any member you want and you also have a special checkbox that enables you to select or deselect all the members.
This specific checkbox works properly on Chrome and Firefox.
However, when you check it on Internet Explorer 8, none of the members are selected or deselected, whether they names are check or not.
Here is the code sample of the form generation and of the onClick functions triggered when you check the checkbox :

   updateMembersList : function TS_updateMembersList(containerId)
   {
       var div = Dom.get(containerId);
       div.innerHTML = "<div class=\"memberDiv\">" +
           "<input type=\"checkbox\" id=\"selectDeselectAllCb\" checked=\"true\" onchange=\"YAHOO.Bubbling.fire('selectDeselectAllChanged')\" class=\"memberCb\"/>" +
           "<label for=\"selectDeselectAllCb\" class=\"memberLabel\">" + 
           this.msg('label.selectDeselectAll') + "</label>" +
           "</div>";

       for (var i=0; i<this.members.length; i++)
       {
           var member = this.members[i];
           var avatar = Alfresco.constants.URL_CONTEXT + "/components/images/no-user-photo-64.png";

           if (member.authority.avatar && member.avatar != "")
           {

               avatar = Alfresco.constants.PROXY_URI + member.authority.avatar + "?c=force";
           }
           div.innerHTML += "<div class=\"memberDiv\">" +

                "<input type=\"checkbox\" id=\"cb_" + member.authority.userName + "\" checked=\"true\" onchange=\"YAHOO.Bubbling.fire('selectDeselectMemberChanged')\" class=\"memberCb\"/>" +
                "<label for=\"cb_" + member.authority.userName + "\" class=\"memberLabel\">" + 
                        member.authority.firstName + " " + member.authority.lastName + "</label>" +
                "</div>";
       }
   },


   selectDeselectAllChanged: function selectDeselectAllChanged(){
       var selectDeselectAllCb = Dom.get('selectDeselectAllCb');
       var checked = selectDeselectAllCb.checked;
       console.log("Select All");
       var cbs = YAHOO.util.Selector.query("input[id^='cb_']");

       for (var i=0, j=cbs.length; i<j; i++)
       {
           var cb = cbs[i];
           cb.checked = checked;
       }
   },

   selectDeselectMemberChanged: function selectDeselectMemberChanged(){
       var selectDeselectAllCb = Dom.get('selectDeselectAllCb');
       var cbs = YAHOO.util.Selector.query("input[id^='cb_']");

       var firstChecked;
       if (cbs[0] != null){
           firstChecked = cbs[0].checked;
       }

       for (var i=0, j=cbs.length; i<j; i++)
       {
           var cb = cbs[i];
           if (cb.checked === firstChecked){
               continue;
           }
           else{
               selectDeselectAllCb.checked = false;
               return;
           }
       }
       selectDeselectAllCb.checked = firstChecked;
   },

At the beginning, I thought that the query wasn't supported by IE8, but it's not the case.
Such a syntax is supported by IE7 and more recent versions.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不再见 2025-01-12 23:09:09

尝试删除 console.log("Select All"); 并将其替换为 Alfresco.logger.debug("Select All");
IE 不喜欢控制台对象。

另外,在 jslint 上运行代码 - 如果某处有无效的 json,IE 将停止。

另外,尝试在开发人员模式下运行 IE - 将其设置为显示脚本错误,然后您就会知道它在哪里停止。

Try removing console.log("Select All"); and replace it with Alfresco.logger.debug("Sellect All");
IE doesn't like console object.

Also, run your code on jslint - if you have an invalid json there somewhere, IE stops.

Also, try running IE in developer mode - set it up to show you script errors and you'll know where it stops.

深陷 2025-01-12 23:09:09

我已经解决了这个问题。我已将 onchange 事件处理程序替换为 onclick 事件处理程序。事实上,onchange 在 Internet Explorer 上具有随机行为,而 onclick 在大多数情况下工作正常。
感谢您的帮助。

I've solved the problem. I've replaced the onchange event handler by an onclick event handler. Indeed, onchange has a random behaviour on Internet Explorer, whereas onclick works fine in most of the case.
Thanks for the help.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文