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

Question

我正在使用理想的表格，在第 4 步有单选按钮组指示用户的家庭状况，之后有一个名为 "wife" 的 div 用于保存配偶的数据未显示。我想要实现的是当单选按钮 "married" 被选中时， div "wife" 出现，当它被取消选中然后再次隐藏。我试过使用 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">&nbsp;</label>
        <button type="button" class="prev">&laquo; Prev</button>
        <button type="submit" class="submit">Submit</button>
    </div>
</section>
       
</body>
</html>

Answer 1

这是因为您没有将 $("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">&nbsp;</label>
    <button type="button" class="prev">&laquo; 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>

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

Ideal Forms issue with showing form element when radio button is checked

javascript

element

show-hide