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.