根据单选按钮值调用不同的javascript文件

问题描述

首先，我想在单选按钮中进行选择，然后基于所选按钮，我要调用一系列不同的javascript文件（请参见demo.js和demo1.js之间的区别）。 这是我的代码，但是不起作用：

write()

解决方法

这个问题已经被问过多次了。您可以创建一个自定义函数。

function include(filename)
{
   var head = document.getElementsByTagName('head')[0];

   var script = document.createElement('script');
   script.src = filename;
   script.type = 'text/javascript';

   head.appendChild(script); 
}   

如果该脚本不起作用，建议您仔细阅读以下内容：How do I include a JavaScript file in another JavaScript file?

,

由于您已经在使用jQuery（已在发布的代码中引用），所以最简单的方法是使用jQuery和Ajax。

首先，您需要检测用户是否单击了单选按钮。然后，您可以检查单击了哪个单选按钮并使用jQuery $.load()（Ajax函数之一，它将把文件从服务器加载到您的项目中）。

示例代码（未经测试）：

<p>Please select your gender:</p>
<label for="male">
   Male: <input type="radio" id="male" name="gender" value="male">
</label><br>
<label for="female">
   Female: <input type="radio" id="female" name="gender" value="female">
</label><br>
<label for="other">
   Other: <input type="radio" id="other" name="gender" value="other">
</label>
<div id="loader"></div>


$(function(){
   $('input[type=radio]').click(function(){
      let id = this.id;
      //alert(`You chose: ${id}`);
      if (id === 'male'){
         $('#loader').load('./demo.html');
      }else if (id === 'female'){
         $('#loader').load('./demo1.html');
      }
   });
});

请注意，demo.html / demo1.html文件将只包含您要加载的javascript，但在<script>和</script>标签之间-因为它们是html文档。 / p>

还要注意，不需要<form>构造。我们在使用ajax之前的几天就使用过表单。有关更多信息，请参见this question。

,

下面的示例在单击yes时将显示一个输入字段。

<script type="text/javascript">
    function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = chkYes.checked ? "block" : "none";
    }
</script>
<span>Do you have Passport?</span>
<label for="chkYes">
    <input type="radio" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" />
    No
</label>
<hr />
<div id="dvPassport" style="display: none">
    Passport Number:
    <input type="text" id="txtPassportNumber" />
</div>