如何使用http.get组合切换开关

时间:2017-05-17 03:01:27

标签: javascript jquery twitter-bootstrap

我尝试使用bootstrap切换进行切换,并在切换单击或关闭时给出som函数http.get。但如果点击它有效,我会遇到一些麻烦,但如果点击它就无法工作。我的代码就像这样

<input id="toggle-two" type="checkbox" data-toggle="toggle" data-width="100">
        <script>
          $(function() {
                        $('#toggle-two').bootstrapToggle({
                          on: 'Lock',
                          off: 'Unlock'
                        }).on('change', function() {
                          $.ajax({ 
                            url: 'http://localhost/web.php?tN=rlock&f12=123456789',
                            data: { checked: $(this).prop('checked') },
                            success: function() {
                              console.log('Lock');
                            }
                            });
                          }).off('change', function() {
                          $.ajax({ 
                            url: 'http://localhost/web.php?tN=runlock&f12=123456789',
                            data: { checked: $(this).prop('checked') },
                            success: function() {
                              console.log('Unlock');
                            }
                            });
                          });
                        });
        </script>

我不知道如何修复它,请帮助解决我的问题

1 个答案:

答案 0 :(得分:1)

您可以尝试这样的事情

<input id="toggle-two" type="checkbox" data-toggle="toggle" data-width="100">
<script>
  $(function() {
     $('#toggle-two').bootstrapToggle({
       on: 'Lock',
       off: 'Unlock'
     }).on('change', function() {
       var Checked_or_not = this.checked,  // check if checked or unchecked
           tN = Checked_or_not ? 'rlock' : 'runlock';  // if checked return 'rlock' if unchecked return 'runlock' for tN in url 
       $.ajax({ 
           url: 'http://localhost/web.php?tN='+ tN +'&f12=123456789',  // add tN in url
           data: { checked:  Checked_or_not }, 
           success: function() {
                      console.log('Lock');
                    }
        });
     });
  });
</script>