選中單選按鈕時顯示表單元素的理想表單問題
[英]Ideal Forms issue with showing form element when radio button is checked
問題描述
我使用的是理想表格，在第4步中，有一個單選按鈕組，它指示用戶的家庭狀況，然后是一個名為“ wife”的div，它保留未顯示的配偶數據。 我要實現的是，當選中“已婚”單選按鈕時，div“妻子”出現，而未選中則再次隱藏。 我試過使用js，但還是沒有！ 我究竟做錯了什么？？？
$(function () { // If your using double quotes in your selector, the type/name designation needs to be surrounded by single // quotes. Opposite is true if you are using single quotes in your selector $("input[name='family']").change(function() { // Getting the radio value alows you to toggle #wife without having a // seperate show-hide if statement for "single" var isChecked = $("input[name='family']:checked").val(); if (isChecked == "married") { $('#wife').show(); } else { $('#wife').hide(); } }); });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="idealsteps-step"> <div align="center"> <label align="center">Στοιχεία Οικογενειακής Κατάστασης</label> </div> <div class="field"> <label class="main">Οικογενειακή Κατάσταση:</label> <p class="group"> <label> <input name="family" type="radio" id="single" value="single">Άγαμος</label> <label> <input name="family" type="radio" id="married" value="married">Έγγαμος</label> <label> <input name="family" type="radio" id="divorced" value="divorced">Διαζευμγένος</label> <label> <input name="family" type="radio" id="symfono" value="symfono">Σύμφωνο Συμβίωσης</label> <label> <input name="family" type="radio" id="widower" value="widower">Χήρος</label> </p> <span class="error"></span> </div> <div class="field" id="wife" name="spouse_data" style="display:none"> <table> <tr> <td colspan="2" align="center"><strong>Στοιχεία Συζύγου</strong> </td> </tr> <tr> <td> <label class="main">Ονοματεπώνυμο</label> </td> <td> <label class="main">Ημ/νία Γέννησης</label> </td> </tr> <tr> <td> <input name="spouse_fullname" type="text" data-idealforms-ajax="ajax.php"> </td> <td> <input name="spouse_date_of_birth" type="text" placeholder="HH/MM/EEEE" class="datepicker"> </td> </tr> </table> </div> <div class="field buttons"> <label class="main"> </label> <button type="button" class="prev">« Prev</button> <button type="submit" class="submit">Submit</button> </div> </section> </body> </html>
1 個解決方案
解決方案1
0 已采納 2015-03-17 19:50:27
這是因為您沒有將$("input[type=radio]")類型名稱括在單引號中-例如$("input[type='radio']") 。 由於您有無線電組的名稱，因此直接綁定該名稱可能更有意義。
例：
$(function() { // If your using double quotes in your selector, the type/name designation needs to be surrounded by single // quotes. Opposite is true if you are using single quotes in your selector $("input[name='family']").change(function() { // Getting the radio value alows you to toggle #wife without having a // seperate show-hide if statement for "single" var isChecked = $("input[name='family']:checked").val(); if (isChecked == "married") { $('#wife').show(); } else { $('#wife').hide(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="idealsteps-step"> <div align="center"> <label align="center">Στοιχεία Οικογενειακής Κατάστασης</label> </div> <div class="field"> <label class="main">Οικογενειακή Κατάσταση:</label> <p class="group"> <label> <input name="family" type="radio" id="single" value="single">Άγαμος</label> <label> <input name="family" type="radio" id="married" value="married">Έγγαμος</label> <label> <input name="family" type="radio" id="divorced" value="divorced">Διαζευμγένος</label> <label> <input name="family" type="radio" id="symfono" value="symfono">Σύμφωνο Συμβίωσης</label> <label> <input name="family" type="radio" id="widower" value="widower">Χήρος</label> </p> <span class="error"></span> </div> <div class="field" id="wife" name="spouse_data" style="display:none"> <table> <tr> <td colspan="2" align="center"><strong>Στοιχεία Συζύγου</strong> </td> </tr> <tr> <td> <label class="main">Ονοματεπώνυμο</label> </td> <td> <label class="main">Ημ/νία Γέννησης</label> </td> </tr> <tr> <td> <input name="spouse_fullname" type="text" data-idealforms-ajax="ajax.php"> </td> <td> <input name="spouse_date_of_birth" type="text" placeholder="HH/MM/EEEE" class="datepicker"> </td> </tr> </table> </div> <div class="field buttons"> <label class="main"> </label> <button type="button" class="prev">« Prev</button> <button type="submit" class="submit">Submit</button> </div> </section> <div class="field" id="wife" name="spouse_data" style="display:none"> <table> <tr> <td colspan="2" align="center"><strong>Στοιχεία Συζύγου</strong> </td> </tr> <tr> <td> <label class="main">Ονοματεπώνυμο</label> </td> <td> <label class="main">Ημ/νία Γέννησης</label> </td> </tr> <tr> <td> <input name="spouse_fullname" type="text" data-idealforms-ajax="ajax.php"> </td> <td> <input name="spouse_date_of_birth" type="text" placeholder="HH/MM/EEEE" class="datepicker"> </td> </tr> </table> </div>
選中單選按鈕時啟用表單按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.