用Jquery在按钮之间切换

Question

我有这个用户界面

​

​

当我第一次出现在页面上时，两个按钮就会出现在上面。当我选中复选框时，保存按钮出现，另一个按钮消失(我想要的方式)，反之亦然

问题是，在第一次我只想要一个按钮出现，即“保存更改”按钮。这是我的密码：

   <hr>
        <?php

        $conn=ConnectToSql();

        $query1 = "SELECT * FROM tbl_countries";

        $result1 = mysqli_query($conn ,$query1)
        or die ("Error in query" . mysqli_error($conn));

          $choose = '';

        while ($row = mysqli_fetch_assoc($result1))
            {

                $choose .= '<option value = "'.$row['name'].'">'.$row['name'].'</option>';
            }
        ?>
  <div class="form-group">
          <label class="control-label col-sm-2" for="Country">Choose a country:</label>
          <div class="col-sm-5">
              <select class="form-control" name ="reg_country" >
                  <option selected></option>
                  <?php echo $choose;?></select>
          </div>
            </div>
    <br><br><br>

    <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>
    <br>
      <div class="form-group">
          <div class="col-sm-offset-4 col-sm-10">
            <button type="submit" name="submit" class="btn btn-default">Submit</button>
          </div>
      </div>
    <br>

    <hr>

此代码用于行和列之间的切换：

    <tr type="hidden" id="rowhidden" class="rowhidden">

                    <td >All Countries</td>
                    <td><select class="form-control"  name ="monday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                    <td><select class="form-control"  name ="tuesday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                    <td><select class="form-control"  name ="wednesday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                    <td><select class="form-control"  name ="thursday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                    <td><select class="form-control"  name ="friday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                    <td><select class="form-control"  name ="saturday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                    <td><select class="form-control"  name ="sunday_all" > 
                        <option></option>
                        <option value = "Open">Open</option>
                        <option value = "Close">Close</option>
                        </select></td>
                </tr>
            </table>


             <?php
             }
             ?>

这是一个脚本：

      $("#change").change(function(){

        //row  
        $("#tablecountry tr.row2").toggle(!this.checked);
        $("#tablecountry tr.rowhidden").toggle(this.checked);

        //button
        $(".country-specific").fadeIn("slow").toggle(!this.checked);
        $(".country-all").fadeIn("slow").toggle(this.checked);

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



And 2 buttons with the id country-all and country-specific.

现在我有两个问题：

1. 首先，我需要显示一个按钮，然后他们将切换与复选框。
2. 首先，我希望从下拉列表中得到一个默认值。例如，马耳他。(您可以从下拉列表中选择马耳他，以便它已经存在于下拉列表中)

Answer 1

在jQuery脚本中，您试图获得对 id、#国家特定的和#country-all的引用，这些都不存在(您使用了两次类属性，但没有id属性)。

​

$("#change").change(function(){
        

        $("#tablecountry tr.row2").toggle(!this.checked);
        $("#tablecountry tr.rowhidden").toggle(this.checked);
        $(".country-specific").fadeIn("slow").toggle(!this.checked);
        $(".country-all").fadeIn("slow").toggle(this.checked);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="change">
<div class="form-group country-specific">
  <div class="col-sm-offset-5 col-sm-10">
    <button type="submit" name="updated" class="btn btn-default">Save Changes</button>
  </div>
</div>
<div class="form-group country-all">
  <div class="col-sm-offset-5 col-sm-10">
    <button type="submit" name="update-all" class="btn btn-default">Save</button>
  </div>
</div>

​