Question

我有一个脚本，当选中单选按钮时，该脚本应该将一组表单字段复制到另一个表单字段。它适用于Safari，firefox（mac）但不适用于FF（PC）或IE。

function checkFirstDirAddrs() { 
var i;
//checking which radio button selected
for ( i = 0;  i < FirstCorpDirAddOption.length; i++) {

if (FirstCorpDirAddOption[i].checked == true) {

    switch(i)
    {
        case 0:
        document.getElementById("First_Corp_Director_Address1").value =  document.getElementById("Corp_Address1").value;
        document.getElementById("First_Corp_Director_Address2").value = document.getElementById("Corp_Address2").value;
        document.getElementById("First_Corp_Director_City").value = document.getElementById("Corp_City").value;     
        document.getElementById("First_Corp_Director_Postal").value = document.getElementById("Corp_Postal").value; 
        break

        case 1:
        document.getElementById("First_Corp_Director_Address1").value = '';
        document.getElementById("First_Corp_Director_Address2").value = '';
        document.getElementById("First_Corp_Director_City").value = '';         
        document.getElementById("First_Corp_Director_Postal").value = '';
        break
     }

   }
 }

}

html ....

<div class="form-group">
    <div class="col-sm-10"><strong>*Director Address</strong></div>
     <div class="col-sm-6">
     <div class="radio">
        <label> 
            <input name="FirstCorpDirAddOption" id="FirstCorpDirAddOption" type="radio" value="Same as Corporate Address" onClick="checkFirstDirAddrs();">
            Same as Corporate Address<br>          
        </label>
        <label>
            <input name="FirstCorpDirAddOption" id="FirstCorpDirAddOption" type="radio" value="Other" onClick="checkFirstDirAddrs();">
            Other <em>(provided below)</em> 
        </label>
        </div>
    </div>            
 </div>

  <div class="form-group">
        <label for="First_Corp_Director_Address1" class="col-sm-2 control-label">*Address:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="First_Corp_Director_Address1" name="First_Corp_Director_Address1" maxlength="80"> 
        </div>
    </div>               
    <div class="form-group">
        <label for="First_Corp_Director_Address2" class="col-sm-2 control-label">Address 2:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="First_Corp_Director_Address2" name="First_Corp_Director_Address2" maxlength="80">
        </div>
    </div>
    <div class="form-group">
        <label for="First_Corp_Director_City" class="col-sm-2 control-label">*City:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="First_Corp_Director_City" name="First_Corp_Director_City" maxlength="50"> 
        </div>
    </div>       

    <div class="form-group">
        <label for="First_Corp_Director_Postal" class="col-sm-2 control-label">*Postal/Zip:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="First_Corp_Director_Postal" id="First_Corp_Director_Postal" maxlength="7">
            <span class="help-block">(enter NA if not from Canada/USA)</span> 
        </div>
    </div>

如果有人能够对这个问题有所了解，那就更好了。它在我测试的大多数基于Mac的浏览器上都能正常工作，并且在开发工具的控制台中不会出错。

Answer 1

据我所知，没有标准可以通过全局变量在一个文档中处理相同的ID。

了解它们初始化的id和全局变量之间的引用是很好的。但上帝请，不要使用它。您可以使用任何选择器或创建不同的ID，而不是尝试使用'FirstCorpDirAddOption'获取ID。就像这样，例如：

document.querySelectorAll('.radio input')

只需检查通过全局变量得到的内容：

这是Chrome 这是FF

他们是不同的。因此，您不能使用相同的代码。

Answer 2

你需要摆脱重复的ID，因为它们会给你带来麻烦。

如果你摆脱了重复的ID仍然有一个＆＃39; hook＆＃39;你有3个选项。 JavaScript可以用来访问元素。

选项1：通过名称
选项2：通过新的CSS 类名称
选项3：通过其他一些＆＃34;松散定义的＆＃34;访问元素。方法

为简单起见，我建议＃1，但＃2也一样好。

<div class="radio">
  <label>
    <input type="radio" name="FirstCorpDirAddOption" value="Same as Corporate Address" onclick="checkFirstDirAddrs();"/>
            Same as Corporate Address
  </label>
  <br/>
  <label>
    <input type="radio" name="FirstCorpDirAddOption" value="Other" onclick="checkFirstDirAddrs();"/>
            Other <em>(provided below)</em> 
  </label>
</div>

现在用JavaScript来访问输入：

function checkFirstDirAddrs(){
  var i;
  //checking which radio button selected
  var firstCorpDirOptions = document.querySelectorAll('input[name="FirstCorpDirAddOption"]');
  for(i=0;i<firstCorpDirOptions.length;i++){
    if(firstCorpDirOptions[i].checked == true){
      //...

单击时，Javascript单选按钮不复制字段

2 个答案: