1

Tenho um checkbox que ao ser marcado ou desmarcado executa uma update no banco, com ajax. Porém não sei como analisar o evento de mudança de estado dele. Se uso o checked ele considera só o estado atual do botão.

Alguem pode me ajudar ? Segue minha função (chamo ela no onchange do checkbox):

function check_cadmanual(id){
    var id_pronto = id.split("_");
    var codveiculo = id_pronto[1];
    event.preventDefault();
    if(document.frmveic.iptcadastromanual.checked) {
        document.frmveic.funcao.value = "ativo";
    } else {
        document.frmveic.funcao.value = "inativo";
    }
    startloader();
    var jqxhr = $.ajax( {
        url: "/configuracao_veiculo",
        type: "POST",
        data: {
            timeout:default_timeout,
            iptcadastromanual:codveiculo,
            funcao: document.frmveic.funcao.value

        }
    })
    .done(function() {
        stoploader();
        ajaxget('veiculo', 'Veículos');
        if(document.frmveic.funcao.value == "ativo") {
            mensagemSucesso("Esse veículo já pode ser acessado no cadastro manual de clientes !");
        } else {
            mensagemValidacao("Atenção","Esse veículo não está mais disponível no cadastro manual de clientes !");
        }
    });
}

A montagem do checkbox:

$sql = "select codveiculo, nome, indcadastromanual from veiculo 
            where codempresa=".$codempresa." order by nome";
$rst = my_query($connR, $sql);
foreach($rst as &$row){
    if($row['indcadastromanual'] == 1) {
        $checked = "checked='checked'";
    } elseif ($row['indcadastromanual'] == 0) {
        $checked = " ";
    }
    $htmlveiculo='<ul>';
    $htmlveiculo .="<input type='checkbox' name='iptcadastromanual' class='onoffswitch-checkbox' id='iptcadastromanual_".$row['codveiculo']."' onchange='javascript:check_cadmanual(this.id);' ".$checked." >"
    $htmlveiculo .= '</ul>';
}
3
  • 1
    O que é o id? Podes mostrar como isso está no HTML?
    – Sergio
    Commented 23/12/2015 às 13:01
  • Oi @Sergio, coloquei o html na pergunta. Commented 23/12/2015 às 13:18
  • Ok, juntei mais detalhes à minha resposta
    – Sergio
    Commented 23/12/2015 às 13:25

4 Respostas 4

5

Sugiro correres essa função pelo JavaScript e não inline pelo HTML.

Dessa maneira tens acesso ao elemento que foi clicado e facilmente lês o estado com this.checked.

Exemplo:

var checkbox = document.querySelector('input');
checkbox.addEventListener('change', check_cadmanual)
function check_cadmanual() {
    document.getElementById('res').innerHTML = this.checked ? 'marcado' : 'desmarcado';
}
Clica aqui -> <input type="checkbox">
<div id="res"></div>

jsfiddle: https://jsfiddle.net/a8dpwg5w/

actualização:

Com o HTML que juntaste agora à pergunta sugiro então, usares o código assim:

$('.onoffswitch-checkbox').on('change', check_cadmanual);

function check_cadmanual() {
    var id = this.id;
    var checked = this.checked
    // e o resto igual, e para saberes o estado tens agora uma variavel com essa informação

retirando esse onchange do HTML.

0
4

Supondo que você tenha o seguinte checkbox:

<input type="checkbox" id="checkVeiculo" value="" />

Você pode atribuir um evento onclick via javascript:

<input type="checkbox" id="checkVeiculo" value="" onclick="javascript:check_cadmanual(this)"/>

Na sua função check_cadmanual:

function check_cadmanual(elemento) {
    var checkbox = $(elemento);
    var checked = checkbox.prop("checked");
    if (checked) {
      // seu ajax.
    } else {
      // TODO
    }    
}
1
  • Obrigada pela dica ! Commented 23/12/2015 às 19:13
3

Coloca um evento change no seu checkbox, e verifique se esta checado ou nao com o comando $('#myCheckbox').is(':checked')

  //Exemplo
  $('#myCheck').bind('change',function(){
    alert('Checkbox checado?'+ $(this).is(':checked'));
    //Seu ajax aqui
  })

Veja se ajuda.

1
  • o is(':checked')) fez exatamente o que eu precisava, nem precisei alterar mais coisas.. Super obrigada !!! Commented 23/12/2015 às 18:26
2

Eu faria algo assim:

<input type="checkbox" id="idDoCheckbox" data-id="idDoVeiculo" />

$(function() {
    $("#idDoCheckBox").click(function() {
        startLoader();
        var checked = this.checked;
        var funcao = checked ? "ativo" : "inativo";
        var id = $(this).attr("data-id");

        // suas chamadas ajax...
    });
});

Tente não misturar muito jQuery com puro JavaScript. Não há nenhum problema nisso, mas se já está implementando jQuery, use de todos os recursos deles para facilitar sua vida e acelerar seu desenvolvimento.

1
  • Obrigada pela dica ! Commented 23/12/2015 às 19:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .