jquery - 显示/隐藏表格行

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>

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

Answer 1

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

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

"HELLO" need to be hidden at first

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

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

Fiddle

Fiddle2 - fiddle 上方还有 2 个按钮，1 个用于仅显示第一行，另一个用于仅显示第二行