更改单选按钮名称javascript无法在IE中工作

问题描述：

我在jsp页面中有几个radiobuttons。一旦页面加载，我运行一个javascript方法，寻找某些单选按钮并更改其名称，使它们像一个广播组一样工作。

I have a few radiobuttons in a jsp page. I run a javascript method once the page is loaded that seeks for certain radio buttons and change its name so they work like a radio group.

我这样做是因为单选按钮在jsf表中，我在编码时无法访问name属性，我希望所有单选按钮都能工作就像一个广播组一样。

I'm doing it this way because the radio buttons are inside jsf table and I have no access to the name property when coding and I want all of the radio buttons work like a radio group.

无论如何，脚本运行没有问题，单选按钮的名称也正确更改。

Anyways the script run without problems and the radio buttons' names are changed properly.

但是虽然这适用于FF 3（像无线电组这样的工作）但它在IE 6或IE7中不起作用，尽管它们具有相同的名称属性。有谁知道如何解决这个问题？

But while this works in FF 3 (the work like a radio group) it doesn't work in IE 6 or IE7 though they have the same 'name' property. Does anyone know how can I solve this?

function setRadioGroup (nombreRadio){
    var listaRadios = document.getElementsByTagName('input');
    var tam = listaRadios.length;
    for (i = 0; i < tam; i++){
        if (listaRadios[i].type == 'radio' && listaRadios[i].title == 'Seleccionar'){
        listaRadios[i].name = nombreRadio;
       }
    }
}

编辑：添加了代码输出网页：

Added the code output of the webpage:

<form id="formulario" name="formulario" method="post"
    action="/serequp/faces/administracion/articulosPv.jspx"><input
    type="hidden" id="formulario:hidRegTablaArticulos"
    name="formulario:hidRegTablaArticulos" value="">
<div class="dr-pnl rich-panel " id="formulario:ContFormularios">
<div class="dr-pnl-h rich-panel-header cabeceraFormulario"
    id="formulario:ContFormularios_header">LISTADO DE GRUPOS DE
EQUIPAMIENTOS</div>
<div class="dr-pnl-b rich-panel-body cuerpoFormularios"
    id="formulario:ContFormularios_body">
<table id="formulario:botones">
    <tbody>
        <tr>
            <td class="estiloColumnas"><input id="formulario:j_id66"
                name="formulario:j_id66"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id66':'formulario:j_id66'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id66'} );return false;"
                value="Crear" type="button"></td>
            <td class="estiloColumnas"><input id="formulario:j_id67"
                name="formulario:j_id67"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id67':'formulario:j_id67'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id67'} );return false;"
                value="Modificar" type="button"></td>
            <td class="estiloColumnas"><input id="formulario:j_id68"
                name="formulario:j_id68"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id68':'formulario:j_id68'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id68'} );return false;"
                value="Borrar" type="button"></td>
            <td></td>
        </tr>
    </tbody>
</table>
<table class="dr-table rich-table " id="formulario:tablaArticulos"
    border="0" cellpadding="0" cellspacing="0">
    <colgroup span="3"></colgroup>
    <thead class="dr-table-thead">
        <tr class="dr-table-subheader rich-table-subheader ">
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id69header">
            <div id="formulario:tablaArticulos:j_id69header:sortDiv">Nombre</div>
            </th>
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id71header">
            <div id="formulario:tablaArticulos:j_id71header:sortDiv">Nombre</div>
            </th>
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id75header">
            <div id="formulario:tablaArticulos:j_id75header:sortDiv">Descripci&oacute;n</div>
            </th>
        </tr>
    </thead>
    <tbody id="formulario:tablaArticulos:tb">
        <tr class="dr-table-firstrow rich-table-firstrow ">
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id69">
            <table id="formulario:tablaArticulos:0:radioGroup1">
                <tr>
                    <td><input id="formulario:tablaArticulos:0:radioGroup1:0"
                        type="radio" name="formulario:tablaArticulos:0:radioGroup1"
                        value="1" onclick="updateSelected('hidRegTablaArticulos', '1');"
                        title="Seleccionar"><label
                        for="formulario:tablaArticulos:0:radioGroup1:0"></label></td>
                </tr>
            </table>
            </td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id71">fff</td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id75">PRUEBA SDS</td>
        </tr>
        <tr class="dr-table-firstrow rich-table-firstrow ">
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id69">
            <table id="formulario:tablaArticulos:1:radioGroup1">
                <tr>
                    <td><input id="formulario:tablaArticulos:1:radioGroup1:0"
                        type="radio" name="formulario:tablaArticulos:1:radioGroup1"
                        value="1" onclick="updateSelected('hidRegTablaArticulos', '2');"
                        title="Seleccionar"><label
                        for="formulario:tablaArticulos:1:radioGroup1:0"></label></td>
                </tr>
            </table>
            </td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id71">dd</td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id75">PRUEBA SDS</td>
        </tr>
    </tbody>
</table>
<script>
                            setRadioGroup('radioGroup1');
                        </script></div>
</div>
<table id="formulario:botonera">
    <tbody>
        <tr>
            <td><input id="formulario:j_id80" name="formulario:j_id80"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id80':'formulario:j_id80'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id80'} );return false;"
                value="Grabar" type="button"></td>
        </tr>

    </tbody>
</table>
<input type="hidden" name="formulario" value="formulario"><input
    type="hidden" name="autoScroll" value=""><input type="hidden"
    name="formulario:j_idcl" value=""><input type="hidden"
    name="formulario:_link_hidden_" value=""><script
    type="text/javascript">function clear_formulario() {
_clearJSFFormParameters('formulario','',['formulario:j_idcl','formulario:_link_hidden_']);
}
function clearFormHiddenParams_formulario(){clear_formulario();}
function clearFormHiddenParams_formulario(){clear_formulario();}
clear_formulario();</script><input type="hidden" name="javax.faces.ViewState"
    value="!40dc077b"></form>*

答

我终于得到了答案！

解决方案来自于此博客，但有一些修改（博客，和许多其他人一样，解决了创建新元素的问题，而不是修改现有元素。）

The solution come from this blog, but with some modification (the blog, as many others, solve the problem for create a new element, not to modify an existant one).

问题是Internet Explorer不允许某些在运行时修改属性。其中之一是属性名称。由于无法修改，行为不是您所期望的。解决方案是创建一个新元素，删除旧元素并用新元素替换它。

The problem is that Internet Explorer does not allow some attributes modification during the run time. One of these is the attribute name. As it can not be modified, the behaviour is not what you're expecting. The solution is to create a new element, remove the old one and replace it by the new one.

这里的解决方案（适用于Firefox 3和IE 7）：

Here the solution (work with Firefox 3 and IE 7):

<script>
function setRadioGroup (name){
  var listaRadios = document.getElementsByTagName('input');
  var tam = listaRadios.length;
  for (i = 0; i < tam; i++){
    cur = listaRadios[i];
    if (cur.type == 'radio' ){
      try {
      // if not IE, raise an error and go to catch.            
          element = document.createElement('<input onclick="alert(this.name + this.value);" type="radio" name="' + name + '" value="' + cur.value + '">');
          parentNode = cur.parentNode;
          parentNode.insertBefore(element, cur);
          parentNode.removeChild(cur);
        } catch (err ) {
          cur.setAttribute('name', name);
          cur.setAttribute('onclick', 'alert(this.name + this.value);');
        }
     }
  }
}
</script>

<html>
  <head>
    <title>My Page</title>
  </head>
  <body onload="setRadioGroup('test')">
    <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
      <div align="center"><br>
        <input type="radio" value="Milk"> Milk<br>
        <input type="radio" value="Butter" > Butter<br>
        <input type="radio" value="Cheese"> Cheese
        <hr>
        <input type="radio" value="Water"> Water<br>
        <input type="radio" value="Beer"> Beer<br>
        <input type="radio" value="Wine" > Wine<br>
      </div>
    </form>
  </body>
</html>

更改单选按钮名称javascript无法在IE中工作

相关推荐