由于某种原因，此代码导致所有单选按钮都按选择的方式进行预填充。它始终是组中的最后一个]

Question

我有这组三个单选按钮。如果选择了标有“住家”的标签，则会在要填写的页面上显示一个新表格。一切都很好。但是，由于某种原因，此代码还会导致在页面加载时预先填充所有单选按钮组。例如，如果我有一组4个按钮，则在加载时会预先选择第4个按钮，如果是6个一组，则在加载时会选择第6个按钮，依此类推。我将其范围缩小到此代码...

//SHOW/HIDE BACKUP V
$('input[type="radio"]').click(function(){

    if($(this).attr("value")=="location"){
        $(".Box").hide('slow');
    }
    if($(this).attr("value")=="hub"){
        $(".Box").hide('slow');
    }
    if($(this).attr("value")=="inHome"){
        $(".Box").show('slow');

    }        
});
$('input[type="radio"]').trigger('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <b><u>Backup Ventilator </u></b><b><u>Interface </u></b><br>
  <span>
  <input id="showBackup" value="location" name="F429_backupAtLocRadio" type="radio">
  </span><span>Location 
  <input id="showBackup" value="hub" name="F429_backupAtLocRadio" type="radio">
  </span><span>Hub 
  <input id="showBackup" class="backUp" value="inHome" name="F429_backupAtLocRadio" type="radio">
  </span>In Home 
</div>

Answer 1

消除我的按钮的多个ID解决了问题

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div class="col-6">
<b><u>Backup Ventilator </u></b><b><u>Interface </u></b><br>
<span>
<input id="showBackup1" value="location" name="F429_backupAtLocRadio" type="radio">
</span><span>Location 
<input id="showBackup2" value="hub" name="F429_backupAtLocRadio" type="radio">
</span><span>Hub 
<input id="showBackup3" class="backUp" value="inHome" name="F429_backupAtLocRadio" 
type="radio">

在家里