jQuery更改标签文本，引导程序

Question

这是我第一次尝试编写jquery并且无法更改引导标签文本

我尝试编写一些东西，但是没有用

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

Answer 1

这是一个标签，没有value属性，请使用.text()：

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

此外，如果使用this，则不要将其用引号引起来：

$(this)或this有效，$("this")无效

Answer 2

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

Answer 3

首先，我使用.html(this.value)而不是$("this").text()，然后我将value属性添加到您的复选框，如下所示，现在可以正常使用了。

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

在您提供给我的网站上查看此代码。

Answer 4

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