使用带有开关按钮的jQuery自动刷新网页

时间:2017-01-22 12:19:04

标签: jquery button refresh

我想使用带有开关按钮的jQuery自动刷新我的网页。但是,我尝试了我的代码,但根本不起作用。谁知道有什么问题?

<script>
    $(document).ready(function(){
        $("#btnautorefreshon").click(function(){
        setTimeout(function() { location.reload() },1500);
        });
    });
</script>

以下是开关按钮的代码:

<div class="page-header-actions" data-toggle="buttons" role="group">
             <label class="btn btn-outline btn-primary active">
             <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked />
             <i id="btnautorefreshoff" class="icon wb-check text-active" aria-hidden="true"></i>                        Auto Refresh Off
             </label>
             <label class="btn btn-outline btn-primary">
             <input type="radio" name="options" autocomplete="off" value="autorefreshon" />
             <i id="btnautorefreshon" class="icon wb-check text-active" aria-hidden="true"></i>                        Auto Refresh on
             </label>
</div>

谢谢。

1 个答案:

答案 0 :(得分:0)

自动填充的单选按钮是html中的input标记,因此您只需重新调整选择标签,即可通过向输入本身添加唯一ID来解决此问题。

&#13;
&#13;
/* $(".btn").on({
  'click': function() {
    if ($('input#refreshon').is(':checked')) {
      console.log('checked');
      setTimeout(function() {
          location.reload();
      }, 1500);
    }
  }
}); */

$('input#refreshon').on({
  'click': function() {

    console.log('checked');
    setTimeout(function() {
      location.reload();
    }, 1500);

  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-header-actions" data-toggle="buttons" role="group">
  <label class="btn btn-outline btn-primary active">
    <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked />
    <i id="btnautorefreshoff" class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh Off
  </label>
  <label class="btn btn-outline btn-primary">
    <input id="refreshon" type="radio" name="options" autocomplete="off" value="autorefreshon" />
    <i id="btnautorefreshon" class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh on
  </label>
</div>
&#13;
&#13;
&#13;