Question

我有一个带复选框的表单。选中该复选框后，会使一个表（位于div内）隐藏，并替换为一个文本块，表示已选中该复选框。

在同一个div中，有一个选择框。如果用户选择除“------”之外的任何内容，则某些表格行会隐藏，并被替换为某些文本，表示他们已做出选择。

但是，如果用户首先进行选择然后选中复选框，则目标是让div隐藏整个表并替换为仅一个文本块 - 即文本说你查了一下盒子。

康复，但是，对于这个项目来说，它是有意义的。

所以这里有一些基本的标记清晰（一些伪代码）：

<checkbox input id="cBox">

<div id="myDiv">
  <table id="myTable">
    <select_box id="mySelect">
    <tr class="myTRClass">...some stuff...</tr>
    <tr class="myTRClass">...some stuff...</tr>
    <tr class="myTRClass">...some stuff...</tr>
  </table>

  <div id="replaceTable">
    ...some text telling user they checked the box
  </div>
  <div id="replaceRows" class="replaceMyRows>
    ..some text telling user they made a selection
  </div>
</div>

我的jQuery用于选择框（应该只隐藏表的行）。此代码有效：

t = $("#mySelect").val();
if (t == "") {
    $(".myTRClass").hide();
    $(".replaceMyRows").show();
}
else {
    $(".replaceMyRows").hide();
    $(".myTRClass").show();
}

现在，这是我的jQuery复选框（这应该隐藏整个表）：

    t = $( '#cBox' )
    if ($(t).attr('checked')) {
        $("#myTable").hide();
        $("#replaceTable").show();
    }
    else {
        $("#replaceTable").hide();
        $("#myTable").show();
    }

现在这里是我的问题：这两组jQuery可以自行运行，但是当我开始将各种东西混合在一起时，我就遇到了问题。

例如：如果我从选择框中进行选择，表格行将隐藏并替换为我的文本。完善。但现在，在这种状态下，如果我再勾选复选框以隐藏整个表（当前隐藏了一些行），我得到的是隐藏表，但是两个集合文本存在（文字说“你做了选择”和文字说“你选中了框”）。

我似乎无法使用.show()和.hide()的正确组合来完成这项工作。我的示例的结果应该是：隐藏表，隐藏行，隐藏文本，其中显示我隐藏了行，然后显示说我选中了复选框的文本。

很抱歉，如果这是令人费解的，那么这似乎是一个奇怪的情况应该是直截了当的。

感谢您的帮助：）

编辑：更改了我的标题。

编辑＃2

我添加了一个小提琴here 打开时，选择框选择“-----”，因此表行被隐藏。尝试选择其他内容（显示行）。尝试选中该框（整个表隐藏）。但是，请先选择“-----”，然后选中复选框 - 两个文本都显示出来。在这种情况下，我只想显示“你勾选方框”文字。

想法？

Answer 1

我不确定这里，但似乎你应该稍微改变你的标记来管理。

这是新的HTML：

<input type="checkbox" id="cBox">

<div id="myDiv">
  <div class="hideByChkBx">
    <select id="mySelect" />
    <table id="myTable">
      <tr class="myTRClass">...some stuff...</tr>
      <tr class="myTRClass">...some stuff...</tr>
      <tr class="myTRClass">...some stuff...</tr>
    </table>
    <div id="replaceRows" class="replaceMyRows>
      ..some text telling user they made a selection
    </div>
  </div>
  <div id="replaceTable">
    ...some text telling user they checked the box
  </div>
</div>

这是javascript：

//For select box
t = $("#mySelect").val();
if (t == "") {
    $(".myTRClass").hide();
    $(".replaceMyRows").show();
} else {
    $(".replaceMyRows").hide();
    $(".myTRClass").show();
}

//for checkbox
t = $( '#cBox' )
if ($(t).attr('checked')) {
    $(".hideByChkBx").hide();
    $("#replaceTable").show();
}
else {
    $(".hideByChkBx").show();
    $("#replaceTable").hide();
}

jQuery - 多个.show和.hide工作不正常

1 个答案: