0

我有一个带有复选框的表单。选中该复选框时，会隐藏一个表格（位于 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

我在这里添加了一个小提琴 当它打开时，选择框选择了'-----'，所以表格行被隐藏了。尝试选择其他内容（显示行）。尝试选中该框（整个表隐藏）。但是，请尝试先选择“-----”，然后选中该框 - 两个文本都会显示。在这种情况下，我只想显示“您已选中”文本。

想法？

4

1 回答 1

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();
}
于 2012-12-14T06:01:00.460 回答