Question

我正在使用理想的表格，在第4步，有一个单选按钮组，用于指示用户的家庭状态，之后有一个名为＆＃34;妻子＆＃34;保持配偶未显示的数据。我想要实现的是当单选按钮＆＃34;结婚＆＃34;被检查，div＆＃34;妻子＆＃34;出现以及何时取消选中然后再次隐藏。我尝试过使用js但仍然没有！我究竟做错了什么？？？

＆＃13;

$(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();
    }
  });


});

＆＃13;

<!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">&nbsp;</label>
        <button type="button" class="prev">&laquo; Prev</button>
        <button type="submit" class="submit">Submit</button>
    </div>
</section>
       
</body>
</html>

＆＃13;

Answer 1

这是因为您并未将$("input[type=radio]")类型标识括在单引号中 - 例如$("input[type='radio']")。由于你有一个无线电组的名称，直接绑定它可能更有意义..

示例：

＆＃13;
＆＃13;
$(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(); } }); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

当选中单选按钮时，显示表单元素的理想表单问题

1 个答案: