CODEWITHSUNDEEP
javascriptjquery
Diasky VB
Diasky VB

Reputation: 45

Jquery change label text, bootstrap

It's the first time I try to code jquery and I can't change a bootstrap label text

I tried to code something, but it doesn't work

$(document).ready(function()
{
    $("#customCheck1").on("change", checkboxChange);

    function checkboxChange()
    {
         $('#lblauto').val($("this").text());
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1" id="lblauto">Auto Reload OFF</label>

Upvotes: 1

Views: 2016

Answers (4)

Jonathan Gagne
Jonathan Gagne

Reputation: 4389

First, I use .html(this.value) instead $("this").text() and secondly I added a value attribute to your checkbox such as below, and it works fine now.

$(document).ready(function() {
  $("#customCheck1").on("change", checkboxChange);

  function checkboxChange() {
    $('#lblauto').html(this.value);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="custom-control-input" id="customCheck1" value="it works">
<label class="custom-control-label" for="customCheck1" id="lblauto">Auto Reload OFF</label>

See this code working on the website that you provided me.

enter image description here

Upvotes: 1

mojtaba ramezani
mojtaba ramezani

Reputation: 1559

$("#customCheck1").on("change", function () {
    if ($(this).is(":checked")) {
        $('#lblauto').text("Checkbox is checked")
    } else {
        $('#lblauto').text("Checkbox is unChecked")
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1" id="lblauto">Auto Reload OFF</label>

Upvotes: 1

Ygor Dur&#227;es
Ygor Dur&#227;es

Reputation: 41

$(document).ready(function()
{
    $("#customCheck1").on("change", checkboxChange);

    function checkboxChange()
    {
         $('#lblauto').text("Checkbox changed");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1" id="lblauto">Auto Reload OFF</label>

Upvotes: 1

Ryan Wilson
Ryan Wilson

Reputation: 10800

It's a label, it doesn't have a value property, use .text():

$('#lblauto').text('Some Text');

Also, if using this, you don't wrap it in quotes:

$(this) or this is valid, $("this") is not

Upvotes: 1

Related Questions