在基于 PHP 的动态表单中使用单选按钮显示/隐藏字段

Question

我想针对我的单选按钮的每个选择显示/隐藏我的下拉字段：

HTML 和 PHP

<?php $Sr = 1; $FPSTopics = mysqli_query($con, "SELECT * FROM table");
  for($i=0; $i< $FPSData = mysqli_fetch_array($FPSTopics); $i++){
 ?>
<tr>
<td style="min-width:50px;"><?php echo $Sr; ?></td>
<td><input type="text" value="<?php echo $FPSData['PFS_topic']; ?>"  readonly required="required" size="58" ></td>
 
<input type="hidden" name="FPSTopic[]" value="<?php echo $FPSData['PFS_topic_id']; ?>" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label>
<input type="radio" name="Suitability[<?php echo $i; ?>]" value="Y" id="YesCheck" /> 
<label>No</label>
<input type="radio" name="Suitability[<?php echo $i; ?>]" value="N" id="NoCheck" /></td>                                                    
                                                   
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2" id="Priority[]" name="Priority[]" >
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>                                                    
</tr>
<?php $Sr++; } ?>

如果从单选按钮中选择“是”。应显示优先领域。如果有人选择否，那么优先级字段应该隐藏。

以下是我的 JS 代码。但在选择时，它会隐藏整列而不是一个字段。

           $('#NoCheck').click(function () {
                      $('.ShowPriority').hide();
                  })
                  $('#YesCheck').click(function () {
                      $('.ShowPriority').show();
                  })

Answer 1

ID 必须是唯一的

您可能会发现这更可靠，因为我相对于行导航

$('[name^=Suitability]').on("click", function() { // any button that starts with Suitablility
  $(this).closest('tr')
    .find('.ShowPriority')
    .toggle(this.value==="Y"); // show if "Y", Hide if not
})

.ShowPriority { display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td style="min-width:50px;">
      Row 1
    </td>
    <td><input type="text" value="topic" readonly required="required" size="58"></td>

    <input type="hidden" name="FPSTopic[]" value="topic" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label>
      <input type="radio" name="Suitability1" value="Y" />
      <label>No</label>
      <input type="radio" name="Suitability1" value="N"/>
    </td>
    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2" id="Priority[]" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>
  <tr>
    <td style="min-width:50px;">
      Row 2
    </td>
    <td><input type="text" value="topic" readonly required="required" size="58"></td>

    <input type="hidden" name="FPSTopic[]" value="topic" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label>
      <input type="radio" name="Suitability2" value="Y" />
      <label>No</label>
      <input type="radio" name="Suitability2" value="N" />
    </td>
    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2" id="Priority[]" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>
</table>

Answer 2

您可以使用$(this).val() == "Y" 来查看单选是否被选中并且选中单选的值为Y 然后显示选择否则隐藏它。

演示代码：

//on click of radio button
$('input[name*=Suitability]').click(function() {
  //check  value is Y
  if ($(this).val() == "Y") {
    $(this).closest("tr").find(".ShowPriority").show(); //show

  } else {
    $(this).closest("tr").find('.ShowPriority').hide(); //hide
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <td style="min-width:50px;">
      1
    </td>
    <td><input type="text" value="<?php echo $FPSData['PFS_topic']; ?>" readonly required="required" size="58"></td>

    <input type="hidden" name="FPSTopic[]" value="<?php echo $FPSData['PFS_topic_id']; ?>" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label>
      <input type="radio" name="Suitability[1]" value="Y" />
      <label>No</label>
      <input type="radio" name="Suitability[1]" value="N" /></td>

    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>
  <tr>
    <td style="min-width:50px;">
      2
    </td>
    <td><input type="text" value="<?php echo $FPSData['PFS_topic']; ?>" readonly required="required" size="58"></td>

    <input type="hidden" name="FPSTopic[]" value="<?php echo $FPSData['PFS_topic_id']; ?>" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label>
      <input type="radio" name="Suitability[2]" value="Y" />
      <label>No</label>
      <input type="radio" name="Suitability[2]" value="N" /></td>

    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>
</table>