jQuery函数对单选按钮不响应

Question

This has been a very tricky one for me (or I'm just downright dumb). 这对我来说是一个非常棘手的问题（或者我只是彻头彻尾的傻瓜）。 Trying to use a JQuery function to make it that when the user selects a certain radio button, the form below changes accordingly (eg an individual sees name, company, title, phone, email and address. company only sees company, phone, email and address. But currently clicking the radio buttons have no effect. 尝试使用JQuery函数使其在用户选择某个单选按钮时会相应地更改下面的表单（例如，个人看到姓名，公司，职务，电话，电子邮件和地址。公司仅看到公司，电话，电子邮件和地址，但当前单击单选按钮无效。

I would also like to ask if: 1) is my function $('#contactType>input'). 我还想问一问：1）是我的函数$（'＃contactType> input'）。 in the right place (within the ) or should it be somewhere else? 在正确的位置（在内）还是应该在其他地方？ 2) Could I use a index.js file instead to make it easier? 2）我可以使用一个index.js文件来简化它吗？ And if so, how to do link the index.js? 如果是这样，该如何链接index.js？ Is it just 只是

Cheers. 干杯。

 $(document).ready(function() { listenForInputChanges(); }) function listenForInputChanges() { $('#contactType >input').change(function() { console.log('val is ' + $(this).val()) switch ($(this).val()) { case 'individual': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').show(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'team': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'company': $('#nameDiv').hide(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; } }) }

 <!DOCTYPE html> <html> <head> <title>Create new contact</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="row"> <form method="post" class="form-horizontal col-md-6 col-md-offset-3"> <h2>Motoko Insurance Contacts</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label for="input" class="col-sm-6 control-label">What type of contact are you adding?</label> <div id="contactType" class="col-sm-10"> <input type="radio" name="Contact_type" value="individual"> Individual <input type="radio" name="Contact_type" value="team"> Team <input type="radio" name="Contact_type" value="company"> Company</div> </div> <div id="nameDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" id="input1" placeholder="Name" /> </div> </div> <div id="companyDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Company</label> <div class="col-sm-10"> <input type="text" name="comp" class="form-control" id="input1" placeholder="Company" /> </div> </div> <div id="titleDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Title</label> <div class="col-sm-10"> <input type="text" name="title" class="form-control" id="input1" placeholder="Title" /> </div> </div> <div id="phoneDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <input type="int" name="urstel" class="form-control" id="input1" placeholder="Phone" /> </div> </div> <div id="emailDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" id="input1" placeholder="E-mail" /> </div> </div> <div id="addressDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Address</label> <div class="col-sm-10"> <input type="text" name="location" class="form-control" id="input1" placeholder="Address" /> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" /> </form> </div> </div> </body> </html>

Answer 1

You were missing the jQuery lib. 您缺少jQuery库。 Remember to add it in the <head> section of your page: 请记住将其添加到页面的<head>部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 $(document).ready(function() { listenForInputChanges(); }) function listenForInputChanges() { $('#contactType >input').change(function() { console.log('val is ' + $(this).val()) switch ($(this).val()) { case 'individual': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').show(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'team': $('#nameDiv').show(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; case 'company': $('#nameDiv').hide(); $('#companyDiv').show(); $('#titleDiv').hide(); $('#phoneDiv').show(); $('#emailDiv').show(); $('#addressDiv').show(); break; } }) }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Create new contact</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="row"> <form method="post" class="form-horizontal col-md-6 col-md-offset-3"> <h2>Motoko Insurance Contacts</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label for="input" class="col-sm-6 control-label">What type of contact are you adding?</label> <div id="contactType" class="col-sm-10"> <input type="radio" name="Contact_type" value="individual"> Individual <input type="radio" name="Contact_type" value="team"> Team <input type="radio" name="Contact_type" value="company"> Company</div> </div> <div id="nameDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" name="name" class="form-control" id="input1" placeholder="Name" /> </div> </div> <div id="companyDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Company</label> <div class="col-sm-10"> <input type="text" name="comp" class="form-control" id="input1" placeholder="Company" /> </div> </div> <div id="titleDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Title</label> <div class="col-sm-10"> <input type="text" name="title" class="form-control" id="input1" placeholder="Title" /> </div> </div> <div id="phoneDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <input type="int" name="urstel" class="form-control" id="input1" placeholder="Phone" /> </div> </div> <div id="emailDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" id="input1" placeholder="E-mail" /> </div> </div> <div id="addressDiv" class="form-group"> <label for="input1" class="col-sm-2 control-label">Address</label> <div class="col-sm-10"> <input type="text" name="location" class="form-control" id="input1" placeholder="Address" /> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" /> </form> </div> </div> </body> </html>

Answer 2

To put your JavaScript in a separate file, just create a javascript file in the same directory as you .html file(For example: 'index.js'). 要将JavaScript放在单独的文件中，只需在与.html文件相同的目录中创建一个javascript文件（例如：“ index.js”）。 After that put your Javascript that you have made in that file. 之后，将您制作的Javascript放入该文件中。 Now you can include it using script tags: 现在，您可以使用脚本标签将其包括在内：

<script type="text/javascript" src="index.js"></script>

src points the path of the index.js file relative to your .html file. src指向index.js文件相对于.html文件的路径。

jQuery函数对单选按钮不响应

问题描述

2 个解决方案

解决方案1
5 已采纳 2018-02-14 23:33:30

解决方案2
1 2018-02-14 23:40:15

jQuery函数对单选按钮不响应

问题描述

2 个解决方案

解决方案1 5 已采纳 2018-02-14 23:33:30

解决方案2 1 2018-02-14 23:40:15

解决方案1
5 已采纳 2018-02-14 23:33:30

解决方案2
1 2018-02-14 23:40:15