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

【问题标题】：Change button behaviour if checkbox is checked如果选中复选框，则更改按钮行为
【发布时间】：2018-01-05 10:54:29
【问题描述】：

我有一个复选框，用作切换，单击时会提交一个带有选中/未选中状态的表单，用于启用/禁用服务。

但是，我现在有一个 API 可以根据位置选择首选项，我想：

如果未选中复选框，请单击提交
如果选中复选框，请单击应用

目前，如果用户调用 API，我有 $(“#checkbox”).click();，但我不确定如何实现此功能，如果已选中复选框以避免关闭服务，则将使用 $(“#apply”).click();。我试过$('#checkbox').attr，但没有问题。

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

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

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

您可以使用此代码来检查复选框是否被选中。您可以根据其状态进行适当的 api 调用。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果你想知道复选框是否被选中，你可以使用jQuery的.is方法和:checked这样：

$(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" />

当你想选中复选框时，你可以使用.prop 方法：

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

【讨论】：