切换jQuery切换按钮时运行服务器端脚本

Question

I have the following jquery plugin on my client side which gives me a on/off switch. I need "off" and "on" to trigger different server side scripts. I know how this can be achieved with a regular "on-click" button, but not with a switch button.

Here is what's in client-side:

<div id="second_div">
            <form>

            <div style="float: left; width: 50%;">
                <p style="padding-bottom: 13px;"><em>Checkbox</em></p>

                <p><input type="checkbox" name="check-1" value="4" class="lcs_check" autocomplete="off" /></p>

            </div>


            </form>
            <div style=" clear: both;"></div>
        </div>

        <div id="third_div">
            <em style="color: #777; font-size: 14px;">Check your browser console to see triggered events</em>
        </div>    
    <p></p>

I would like "off" to trigger one function "google.script.run.loggOff();

I would like "on" to trigger another function "google.script.run.loggOn();

This is usually how i do it with an 'onclick button':

Client Side (on-click button):

<button type="button" onclick="google.script.run.createDoc();">Create Google Doc</button>


<script>
  google.script.run.createDoc();
</script>

Server Side (on-click button):

function createDoc() {
   var copyDoc = DocumentApp.openById(copyId);
      copyDoc.saveAndClose(); 
}

Answer 1

Maybe I'm misunderstanding the question, but if you want to add click functions the on and off you can do something like this.

//off
$('.lcs_check').click(function() {
   $('.lcs_check').attr('id','loggOff');    
   google.script.run.loggOff();
});

//on
$('.lcs_check #loggOff').click(function() {
    $('.lcs_check #loggOff').removeAttr('id','loggOff');
    google.script.run.loggOn();
});

Answer 2

This plugin is LC-switch, i found the github page and a more detailled demo page .

In the demo page there is a Event section, there is 3 events for what you trying to accomplish.

// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
    var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
    console.log('field changed status: '+ status );
});

// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
     console.log('field is checked');
});

// triggered each time a field is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
     console.log('field is unchecked');
});

But it look like each of this event are called after state has changed. I didn't find a way to have click information before state is changed.