`
boogie
  • 浏览: 234699 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

利用JavaScript DOM函数动态创建radio buttons后在IE里无法做选择问题的解决

    博客分类:
  • AJAX
阅读更多
在一个项目里需要用JavaScript动态建立radio buttons,然后替换span element下的内容,在IE里能显示出来,可就是无法做选择,郁闷了半天,后来查网上资料发现是IE的BUG,说是 "IE doesn’t allow the name attribute to be changed after the element is created“,可我试了下Checkbox就不存在此问题。

原代码:
function createCxtjRadioButtons(data,cxtjId,cxtjTagId){
    var tagCxtj = document.getElementById(cxtjTagId);
    tagCxtj.removeChild(tagCxtj.childNodes[0]);
    for (var key in data) {
      var val = data[key];
      var input = document.createElement("input");
      input.setAttribute("name",cxtjId);
      input.setAttribute("type","radio");
      input.setAttribute("value",key);
      tagCxtj.appendChild(input);
      var label = document.createElement("label");
      label.setAttribute("for",input_id);
      label.appendChild(document.createTextNode(val));   
      tagCxtj.appendChild(label); 
    }    
}

解决后:
function createCxtjRadioButtons(data,cxtjId,cxtjTagId){
    var tagCxtj = document.getElementById(cxtjTagId);
    tagCxtj.removeChild(tagCxtj.childNodes[0]);
    for (var key in data) {
      var val = data[key];
      var input = createElement("input", cxtjId); 
      input.setAttribute("type","radio");
      input.setAttribute("value",key);
      tagCxtj.appendChild(input);
      var label = document.createElement("label");
      label.setAttribute("for",input_id);
      label.appendChild(document.createTextNode(val));   
      tagCxtj.appendChild(label); 
    }    
}

function createElement(type, name) {
   var element = null;

   try {
      // First try the IE way; if this fails then use the standard way
      element = document.createElement('<'+type+' name="'+name+'">');
   } catch (e) {
      // Probably failed because we’re not running on IE
   }
   if (!element) {
      element = document.createElement(type);
      element.name = name;
   }
   return element;
}   

参考:
1、http://www.thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/
2、http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/
分享到:
评论
1 楼 woogy 2007-09-17  
!已经解决,谢谢

相关推荐

    选择尺寸jquery代码

    在尺寸选择中,通常使用单选按钮(Radio Buttons)来让用户做出单一选择。通过HTML的`&lt;input type="radio"&gt;`创建单选按钮,通过设置`name`属性使它们属于同一组,用户只能选择其中一项。 7. **jQuery代码实现**: ...

    JavaScript判断表单提交时哪个radio按钮被选中的方法

    表单中的输入类型众多,其中单选按钮(radio buttons)常用于让用户在一组互斥的选项中选择一个。在JavaScript中,判断哪个单选按钮在表单提交时被选中是一个常见的需求。下面详细介绍利用JavaScript判断表单提交时...

    通过angular.element,变成jquery对象,改样式

    在AngularJS框架中,`angular.element`是一个非常有用的工具,它允许开发者将DOM元素转换为jQuery对象,从而利用jQuery丰富的API来操作DOM。这在处理复杂的DOM操作或需要与jQuery库进行集成时特别有用。本篇文章将...

    jQuery问卷调查选择题表单代码.zip

    在问卷表单中,这可能是用于选取特定的表单元素,如单选按钮(radio buttons)和问题文本。 2. **事件处理**:jQuery允许绑定事件监听器到DOM元素上。在问卷表单中,可能会为单选按钮绑定点击事件,当用户选择答案...

    vue.js选中动态绑定的radio的指定项

    在Vue.js框架中,动态绑定和操作表单元素是前端开发的常见任务之一。本文将详细讲解如何使用Vue.js选中动态绑定的radio按钮的指定项。为了实现这一功能,我们需要理解Vue.js中v-model指令的用法,以及如何通过...

    jQuery中:radio选择器用法实例

    本文将详细介绍jQuery中针对单选按钮(radio buttons)的选择器用法,分析其功能和定义,并通过实例来讲解匹配和使用单选按钮的技巧。 ### jQuery中:radio选择器的定义 jQuery中的:radio选择器是一种属性选择器,...

    jquery 单选按钮点击切换

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及动画效果。本文将深入探讨如何使用 jQuery 实现单选按钮的点击切换效果,这在构建用户交互丰富的 web 应用时非常常见。 ...

    一个漂亮的基于jQuery单选框跟复选框效果Demo源码

    在这个Demo中,jQuery被用来操控单选框(radio buttons)和复选框(checkboxes)的显示效果。 2. **DOM操作**:jQuery提供了一系列方法来查找、遍历和修改DOM元素。在本Demo中,开发者可能使用了`$(selector)`来...

    js使用DOM设置单选按钮、复选框及下拉菜单的方法

    标题中提到的知识点是“js使用DOM设置单选按钮、复选框及下拉菜单的方法”,描述中指出该知识点在介绍如何使用JavaScript的文档对象模型(DOM)来控制HTML表单中的单选按钮、复选框以及下拉菜单的行为。具体来说,这...

    javascript判断是否有对RadioButtonList选项选择

    在讨论如何使用JavaScript判断RadioButtonList控件是否有选项被选中的问题之前,首先需要明确几个关键概念和组件,这些是构建整个知识点的基石。以下将详细展开与知识点相关的各个方面。 ### 关键知识点一:...

    如何使用Jquery获取Form表单中被选中的radio值

    在使用jQuery处理HTML表单时,经常需要获取用户通过单选按钮(radio buttons)所选中的值。这在制作问卷调查、选择设置...如果读者在使用过程中遇到问题,也可以在相关社区或论坛中寻求帮助,共同探讨更好的解决方案。

    JavaScript初级教程(第五课续)第1/3页

    在JavaScript初级教程的第五课续中,我们主要探讨了单选框(Radio Buttons)的使用方法及其与复选框的区别。 单选框与复选框在HTML中的表现形式类似,但它们的行为却有本质的不同。复选框允许用户多选,可以同时...

    老裴帮助关于Jquery操作单选框的小练习

    例如,创建一个动态的问卷调查,用户选择答案后立即显示结果,或者在提交表单前验证用户是否已选择至少一个选项等。 【标签】"源码 工具"表明这个小练习可能包含了一些具体的源代码示例和实用工具,可能是一个简单...

    jquery radio 操作代码

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画和Ajax交互。在给定的文件中,我们关注的是如何使用 jQuery 操作单选按钮(radio buttons)。单选按钮通常用于在一组选项...

    使用JavaScript在单选按钮上显示/隐藏控件单击

    在网页设计和开发中,JavaScript是一种非常重要的脚本语言,用于增强用户交互和动态功能。在给定的场景中,我们需要实现一个功能:当用户点击单选按钮时,根据所选选项来显示或隐藏特定的Label控件。这个功能常见于...

    iCheck-1.x

    iCheck-1.x 是一个基于 jQuery 的前端框架,它的主要目标是为各种浏览器、设备和用户提供一致的表单元素交互体验,尤其是对于复选框(checkboxes)和单选按钮(radio buttons)。这个库旨在解决在不同的环境和设备中...

    用jquery方法操作radio使其默认选项是否

    - jQuery的$(function(){...})是文档就绪函数,用于在DOM加载完成后执行代码。 - jQuery的attr()方法用于获取或设置HTML元素的属性和值。 通过这些知识点,我们可以在需要的场景下使用jQuery来根据特定的逻辑动态地...

    JQuery表单美化定制单选按钮与复选框美化特效

    7. **跨浏览器兼容性**:虽然`JQuery`已经做了很多兼容性工作,但在实际项目中,我们仍然需要注意不同浏览器对某些CSS属性和JavaScript方法的支持情况,以确保在所有主流浏览器中都能正常工作。 在提供的压缩包文件...

    jQuery单选框和复选框美化插件

    通常,jQuery库会放在`&lt;head&gt;`标签内,而"ui-choose.js"可以在`&lt;body&gt;`标签的底部引入,以确保DOM加载完成后再执行脚本。 2. **选择元素**:使用jQuery的选择器(如`$('*[type="radio"]')`或`$('*[type="checkbox"]...

    jQuery单选框跟复选框美化代码.zip

    在IT领域,前端开发是构建用户界面的关键部分,而jQuery作为一个强大的JavaScript库,极大地简化了DOM操作、事件处理以及动画效果。"jQuery单选框跟复选框美化代码.zip"这个资源提供了一种方法,使得开发者可以优雅...

Global site tag (gtag.js) - Google Analytics