如果选中复选框，则更改按钮行为

Question

I have a checkbox which functions as a toggle and when clicked submits a form with the check / unchecked status being used to enable / disable the service.

However, I now have an API which selects preferences based on location and I want to:

1. Click submit if the checkbox is unchecked

2. Click apply if the checkbox is checked

Currently I have $(“#checkbox”).click(); if the user calls the API and I'm not sure how to implement this where $(“#apply”).click(); would be used if the checkbox was checked already to avoid turning the service off. I've tried $('#checkbox').attr but not having problems with it.

$(‘#apicall’).off('click').on('click', function () {
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: "https:// [PRIVATE API REDACTED]“,
        success : function(result){
            console.log(result);
            result=result.successData.server;
            best_ovpn=best_ovpn.trim();
            $(“#dropdown”).val(apical);
            show_openvpn_status();
            if($('#checkbox').attr('checked')) {
                $(" # checkbox ").click();
            } else {
                $(" # apply ").click();
            }
    });
});

Answer 1

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if(this.checked){
            alert("Checkbox is checked.");
        }
        else if(!(this.checked)){
            alert("Checkbox is unchecked.");
        }
    });
});

You can use this code to check whether a checkbox is checked or not. You can make appropriate api calls based on its status.

Answer 2

$('#checkbox').on('change', function(){
    if($(this).is(':checked')){
        alert('checked');
    }else{
        alert('unchecked');
    }
});

Answer 3

if you want to know if the checkbox is checked, you can use .is method of jQuery along with :checked like this:

 $(function(){ console.log("Checkbox1", $("#checkbox1").is(":checked")); console.log("Checkbox2", $("#checkbox2").is(":checked")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="checkbox1" type="checkbox" checked /> <input id="checkbox2" type="checkbox" /> 

and when you want to check the checkbox you can use .prop method :

 $(function(){ $('#checkbox').prop('checked', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="checkbox" /> <p>Checked the checkbox using jQuery</p>