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

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 这里是法郎

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

Answer 2

您需要删除重复的 ID，因为它们会给您带来麻烦。

如果您删除重复的 ID 以仍然拥有 JavaScript 可用于访问元素的 'hook'，您有 3 个选项。

选项 1：通过 name
选项 2：通过新的 CSS class 名称访问元素
选项 3：通过其他一些 "loosely defined" 方法访问元素

为简单起见，我将推荐#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 单击时单选按钮不复制字段

Javascript radio button not copying fields when clicked

javascript

radio-button