associate a checkbox to a script function

Asked

Viewed 1,357 times

0

Hello

I’m trying to make a function for when my checkbox is active activate the function in the script and when it’s not back to normal, I think the script is good, but I just don’t know where to put the id to activate the function.

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>

Basically I want to activate the function Testing only when the checkbox is active.

javascript html jquery

4 answers

3


Could add the event change to checkbox, and validate each time your state changes:

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>

I used the dial #Testeverde input[type='checkbox'] to pick up all checkboxes within the label, and I used an Alert to show how it works, in your case only delete the call Alert to Function

  • I tried to do it but nothing happened

  • I literally copied and pasted but the Alerts aren’t even attached

  • where did you put the code? needs to be in a block where the document is already loaded, "Document ready"

  • I just put it in a script file

  • The already working problem is that since I have a json file the part in the console appears as if the json is not defined

0

Good morning,

Dude, you can try it like this:

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);
    })
}

In HTML, put the path to your Jquery file in Head, or the CDN of the same. The function you can leave in the external JS file, and just call it in your HTML in a TAG script at the end before the body.

  • I didn’t notice that script in html "Test()"

0

You can use the selector $('input:checked') to obtain the selected checkbox inputs, and with the selected and captured input you call its function Teste trachilately.

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)
    }
})

Reference :checked

-1

Here’s an example of how to do this:

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

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.