显示/隐藏表格行

Question

我有这个User Interface

现在我需要首先隐藏“HELLO”所在的行，当用户选中复选框时，将显示“HELLO”行，而“Comino 和下拉列表”所在的其他行将被隐藏。

我试过这段代码，第一行被隐藏，但我不知道如何隐藏第二行并在选中复选框时显示它

这是第一行（不是所有的代码都在这里，因为它很长）：

    <table class="table table-striped" id="tablecountry">
        <thead>
                <tr>
                    <th>Country</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                    <th>Saturday</th>
                    <th>Sunday</th>

                </tr>
            </thead>
             <tr class="row2">
                <td><?php echo $_SESSION['country']?></td>

这是第二行：

  <tr type="hidden" id="rowhidden" class="rowhidden">
                    <td >Hello</td>
                </tr>
            </table>

如果制作的话，这就是 jquery ：

   <script>
       $("#change").change(function(){
            $("#tablecountry tr.row2").toggle(!this.checked); 
        });
            </script>

和复选框名称：

 <div class="form-group">
          <div class="col-md-2 col-md-offset-3">
              <input type="checkbox" name="change" id="change"  value="0" > Change All Countries 


        </div>
    </div>

有人可以帮助切换这 2 行。我一次只需要显示 1 行。如果选中复选框，我需要显示第二行，如果现在显示 checkox，我需要显示第一行。

Answer 1

您可以使用相反的条件this.checked 切换另一行的隐藏和显示，使更改函数如下所示：

$("#change").change(function(){
        $("#tablecountry tr.row2").toggle(!this.checked);
        $("#tablecountry tr.rowhidden").toggle(this.checked);
});

“HELLO”首先需要隐藏

为此，您可以在脚本中触发更改事件。所以第一次运行的时候，change事件就被执行了。

$("#change").change();

Fiddle

Fiddle2 - 在小提琴上方还有 2 个按钮，一个用于仅显示第一行，另一个用于仅显示第二行