代码之家 › 专栏 › 技术社区 › Averroes

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

jsf internet-explorer html javascript

Averroes · 技术社区 · 15 年前

我在JSP页面中有几个单选按钮。加载页面后,我会运行一个javascript方法,查找特定的单选按钮并更改其名称,使它们像一个单选组一样工作。

我这样做是因为单选按钮在JSF表中,编码时我不能访问name属性,我希望所有的单选按钮都像一个单选组一样工作。

无论如何,脚本运行没有问题,并且单选按钮的名称被正确地更改。

但是,虽然它在FF 3(类似于无线电组)中工作,但在IE 6或IE7中不工作,尽管它们具有相同的“名称”属性。有人知道我怎么解决这个问题吗?

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;
       }
    }
}

编辑:添加了网页的代码输出:

<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>*

1 回复 | 直到 15 年前

Jérôme 15 年前

我终于得到答案了!

解决方案来自于此 blog ,但通过一些修改(博客和其他许多博客一样,解决了创建新元素的问题,而不是修改现有元素的问题)。

问题是Internet Explorer不允许在运行时修改某些属性。其中之一是属性名。因为它不能被修改,所以行为不是您所期望的。解决方案是创建一个新元素,删除旧元素,然后用新元素替换它。

这里的解决方案(与firefox 3和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>