JQuery изменить флажок текст кнопки при нажатии

Question

У меня есть несколько кнопок-флажков jQuery, и они работают нормально.Тем не менее, я хотел бы изменить их текст одним щелчком мыши.например: текст кнопки «кликни мне».когда пользователь щелкает по нему, мне нужно изменить, например, на «спасибо за щелчок».

Вот что я пытаюсь использовать:

<script>
    $(function() {
        $("#button").button(); 
        $("#button").click(function(){
            if($("#label").is(':checked')) {
                $("#label span").text("Hide");
            }
            else {
                $("#label span").text("Show");
            }
        });
    }); 
</script>
<input id='button' type='checkbox' />
<label id='label' for="button">Show/Hide</label>

Answer 1

Это ваша первая проблема:

       if($("#label").is(':checked')) {

<label> элементы не проверяются, только их флажки. Измените его на:

if (this.checked) {

В приведенном выше коде this относится к элементу флажка, который был нажат, и мы посмотрим, содержит ли свойство checked значение true. Это гораздо эффективнее, чем .is(':checked').

Кроме того, элемент <label> не имеет дочернего элемента <span>, он просто содержит текст, поэтому

            $("#label span").text("Hide");

должно быть

            $("#label").text("Hide");

Но вы можете сократить все это, используя троичный условный оператор :

    $("#button").click(function(){
        $("#label").text(this.checked ? "Hide" : "Show");
    }

Рабочая демоверсия: http://jsfiddle.net/AndyE/qnrVp/

Answer 2

$("#button").click(function() {
    if($(this).is(':checked')) {
        $("#label").text("Hide");
    } else {
        $("#label").text("Show");
    }
});

А вот и живая демка .

Answer 3

Попробуйте это:

$("#button").click(function(){
     var th = $(this);
     if(th.is(':checked')) {
          $("label[for=" + th.attr('id') + "]").text("Hide");
     } else {
          $("label[for=" + th.attr('id') + "]").text("Show");
     }
});