选中下拉 AND 复选框中的特定值时如何切换文本

How to toggle text when a specific value in drop-down AND checkbox is checked

本文关键字：何切换 文本 AND 复选框      更新时间：2023-09-26

所以现在，我有：

<tr>
  <td class="label">Status:</td>
  <td> 
  <select name="bookStatus" id="status">
  <option value="-1">- Select -</option>
  <option value="0">- Active -</option>
  <option value="1">- Disabled -</option>
  <option value="2">- Cancelled -</option>
  </select>
  </td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
  <td class="label">Out of Print?</td>
  <td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>  

<div id="showthis" style="display:none">
  <tr>
  <td class="label">Remove from ALL QUEUES and Notify?</td>
  <td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>

我的脚本为：

$('#status').change(function () {
    var show = $(this).val();
  if (show != "-1") {
    $('#outprint').show();
  }
  else {
   $('#outprint').hide();
   $('#showthis').hide();
  }
    $('#chk').change(function (){
  if (show == "1") {
    if ($(this).is(":checked")) {
     $('#showthis').show();
     } else {
     $('#showthis').hide();
     }
  }
  else {
    $('#showthis').hide();
  }
  });
});

基本上我正在寻找弹出的隐藏文本当下拉菜单更改且设置为禁用时然后您选中该复选框，将出现最后一个复选框。

我遇到的问题是：

1）当我单击"已禁用"并选中复选框，然后将"已禁用"更改为另一个选项时，仍然会弹出隐藏的文本。

2）您单击默认选项以外的任何选项，然后先单击复选框，然后再将下拉菜单中的选项更改为禁用 ->隐藏的文本不显示。

我将如何处理这个问题？

小提琴

所做的更改：修复了无效的 html，修复了不正确的事件绑定。

您的网页：

<table>
  <tbody>
    <tr>
      <td class="label">Status:</td>
      <td>
        <select name="bookStatus" id="status">
          <option value="-1">- Select -</option>
          <option value="0">- Active -</option>
          <option value="1">- Disabled -</option>
          <option value="2">- Cancelled -</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<table id=outprint style="display:none">
  <tbody>
    <tr>
      <td class="label">Out of Print?</td>
      <td>
        <input type="checkbox" name="outOfPrint" id="chk" />
      </td>
    </tr>
  </tbody>
</table>
<table id="showthis" style="display:none">
  <tbody>
    <tr>
      <td class="label">Remove from ALL QUEUES and Notify?</td>
      <td>
        <input type="checkbox" name="removeAndNotify" />
      </td>
    </tr>
  </tbody>
</table>

Javascript：

var show;
$('#status').change(function() {
  show = $(this).val();
  if (show != "-1") {
    $('#outprint').show();
  } else {
    $('#outprint').hide();
    $('#showthis').hide();
  }
});
$('#chk').change(function() {
  if (show == "1") {
    if ($(this).is(":checked")) {
      $('#showthis').show();
    } else {
      $('#showthis').hide();
    }
  } else {
    $('#showthis').hide();
  }
});

演示

我想您只需要在从下拉列表中更改选项然后循环访问逻辑后，将隐藏控件的状态重置为默认值。

$('#status').change(function () {
 ResetState();
    var show = $(this).val();
  if (show != "-1") {
    $('#outprint').show();
  }
  else {
   $('#outprint').hide();
   $('#showthis').hide();
  }
    $('#chk').change(function (){
  if (show == "1") {
    if ($(this).is(":checked")) {
     $('#showthis').show();
     } else {
     $('#showthis').hide();
     }
  }
  else {
    $('#showthis').hide();
  }
  });
});
function ResetState()
{
   $('#outprint').hide();
   $('#showthis').hide();
   $('#chk').prop("checked", false);
}

例 ： https://jsfiddle.net/DinoMyte/up4j39qr/4/

相关文章：