jQuery函数对单选按钮不响应
[英]JQuery function not responsive for radio buttons
问题描述
这对我来说是一个非常棘手的问题（或者我只是彻头彻尾的傻瓜）。 尝试使用JQuery函数使其在用户选择某个单选按钮时会相应地更改下面的表单（例如，个人看到姓名，公司，职务，电话，电子邮件和地址。公司仅看到公司，电话，电子邮件和地址，但当前单击单选按钮无效。
我还想问一问：1）是我的函数$（'＃contactType> input'）。 在正确的位置（在内）还是应该在其他地方？ 2）我可以使用一个index.js文件来简化它吗？ 如果是这样，该如何链接index.js？ 只是
干杯。
$(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>
2 个解决方案
解决方案1
5 已采纳 2018-02-14 23:33:30
您缺少jQuery库。 请记住将其添加到页面的<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>
解决方案2
1 2018-02-14 23:40:15
要将JavaScript放在单独的文件中，只需在与.html文件相同的目录中创建一个javascript文件（例如：“ index.js”）。 之后，将您制作的Javascript放入该文件中。 现在，您可以使用脚本标签将其包括在内：
<script type="text/javascript" src="index.js"></script>
src指向index.js文件相对于.html文件的路径。
带单选按钮的jQuery post函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.