Question

我有这个用户界面

当我第一次进入页面时，出现2个按钮，如上所示。当我选中复选框时，出现“保存”按钮，另一个消失（我想要的方式），反之亦然

问题在于，首先我只想出现一个按钮，即“保存更改”按钮。这是我的代码：

   <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.

现在我有2个问题：

首先我需要显示1个按钮，然后他们将使用复选框
首先，我想从下拉列表中获取默认值。例如马耳他。（您可以从下拉列表中选择马耳他，以便它已存在于下拉列表中）

Answer 1

在jQuery脚本中，您尝试引用 ID ＃country-specific 和＃country-all 39; t存在（你使用了class属性两次但没有id属性）。

＆＃13;

$("#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();

＆＃13;

<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>

＆＃13;

用Jquery在按钮之间切换

1 个答案: