0

Olá

Estou tentando fazer uma função para quando a minha checkbox estiver ativa ativar a função no script e quando não estiver volta tudo ao normal, eu acho que o script está bom, porém só não sei onde posso colocar o id para ativar a função.

function LoadJsonData(callback) {
  $.ajax({
    url: './Json/JsonSite.json',
    dataType: 'json',
    success: function (json) {
      if (callback) callback(json)
    }
  });
}

function Teste(json) {

  $("#tituloareas").text(json[1].titulo);
  $("#localizacaoareas").text(json[1].localizacao);
  $("#textoareas").text(json[1].texto);

}

$(document).on("click", Selection , Teste);
<label class="Teste" id="Testeverde">
            <input type="checkbox" name="field[]" value="1" class="option__input">
            <p class="textoselect">Teste</p>
        </label>

Basicamente quero ativar a função Teste só quando a checkbox estiver ativa.

4 Respostas 4

3

Podi adicionar o evento change ao checkbox, e validar a cada vez que seu estado muda:

var checkbox = $("#Testeverde input[type='checkbox']");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        alert("Checked, executar function")
    } else {
        alert("Unchecked")
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="Teste" id="Testeverde">
	<input type="checkbox" name="field[]" value="1" class="option__input">
	<p class="textoselect">Teste</p>
</label>

Usei o seletor #Testeverde input[type='checkbox'] para pegar todos os checkboxes dentro do label, e usei um alert para mostrar o funcionamento, no seu caso, só apagar o alert chamar a function

5
  • Tentei fazer isso mas nada aconteceu
    – David Mv
    Commented 7/06/2019 às 11:17
  • Eu literalmente copiei e colei mas os alerts nem assionados sao
    – David Mv
    Commented 7/06/2019 às 11:27
  • onde colocaste o código? precisa ser num bloco onde o documento já esteja carregado, "document ready" Commented 7/06/2019 às 13:22
  • Eu so coloquei num ficheiro script
    – David Mv
    Commented 7/06/2019 às 13:48
  • O já esta a funcionar o problema é que como tenho um ficheiro json a parte na consola aparece como se o json nao fosse definido
    – David Mv
    Commented 7/06/2019 às 13:57
0

Bom dia,

Cara, você pode tentar da seguinte forma:

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Teste</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
<label class="Teste" id="Testeverde">
    <input type="checkbox" name="field[]" value="1" class="option__input" id="checkbox">
    <p class="textoselect">Teste</p>
</label>

<script>
  Teste();
</script>

</body>
</html>

JQuery / Javascript:

function LoadJsonData(callback) {
    $.ajax({
        url: './Json/JsonSite.json',
        dataType: 'json',
        success: function (json) {
            if (callback) callback(json)
        }
    });
}

function Teste(json) {
    $('#checkbox').onactive(function () {
        $("#tituloareas").text(json[1].titulo);
        $("#localizacaoareas").text(json[1].localizacao);
        $("#textoareas").text(json[1].texto);
    })
}

No HTML, coloque o caminho do seu arquivo JQuery no Head, ou o CDN do mesmo. A função você pode deixar no arquivo JS externo, e apenas chamar ela no seu HTML numa TAG script no final antes do body.

1
  • não percebi aquele script no html "Teste()"
    – David Mv
    Commented 7/06/2019 às 11:07
0

Você pode usar o seletor $('input:checked') para obter os inputs checkbox selecionados, e com o input selecionado e capturado você chama sua função Teste traquilamente.

var chekbox = $('input:checked')
chekbox.each(function(ind, ele){
    //Verifique se o elemento tem a classe caso tem mais de um input checkbox na
   //pagina, pois o :checked retorna uma lista com os elementos checkbox selecionados.
    if($(ele).hasClass('option__input')){
       Teste(ele.value)
    }
})

Referencia :checked

-1

Aqui tem um exemplo de como fazer isso:

<script type="text/javascript">
    function ShowHideDiv(chkPassport) {
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = chkPassport.checked ? "block" : "none";
    }
</script>
<label for="chkPassport">
    <input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />
    Você possui passaporte?
</label>
<hr />
<div id="dvPassport" style="display: none">
    Número do passaporte:
    <input type="text" id="txtPassportNumber" />
</div>

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 .