Состояние переключателя переключателя css

Question

Итак, вот что у меня есть для тумблера, который я использую https://metroui.org.ua/inputs.html Что я пытаюсь сделать, это изменить метку, указанную перед переключателем/флажком, чтобы сказать, что отмечен или не отмечен. Если я нажму на ярлык, он изменит переключатель, но текст не изменится. JavaScript:

$(document).ready(function() { 
 
    $('#front_set').click(function() { 
 
    if ($(this).is(':checked')) { 
 
     $(this).siblings('label').html('checked'); 
 
    } else { 
 
     $(this).siblings('label').html(' not checked'); 
 
    } 
 
    }); 
 
});

<label for="front_set">checked</label> 
 
<label class="switch-original right"> 
 
    <input type="checkbox" id="front_set"> 
 
    <span class="check"></span> 
 
</label>

Answer 1

Вопрос: Ярлык не родной брат щелкнул флажком, так что вы не найдете его с помощью siblings. Ярлык на самом деле является братом ярлыка, который является родительским элементом флажка.

Решение. Используйте другой селектор, чтобы найти метку, поэтому их относительные позиции не имеют большого значения. Используя label[for="xyz"], вы можете найти именно эту метку, привязанную к флажку xyz, независимо от ее положения в документе. Это также делает ваш код более гибким, потому что он не будет прерываться немедленно, если вы реорганизуете свой DOM.

var $myLabel = $('label[for="' + this.id + '"]'); 
$myLabel.html($(this).is(':checked') ? 'checked' : ' not checked'); 

$(document).ready(function() { 
 
    $('#front_set').click(function() { 
 
    var $myLabel = $('label[for="' + this.id + '"]'); 
 
    $myLabel.html($(this).is(':checked') ? 'checked' : ' not checked'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="front_set">checked</label> 
 
<label class="switch-original right"> 
 
    <input type="checkbox" id="front_set"> 
 
    <span class="check"></span> 
 
</label>

Answer 2

Вы должны изменить parent().siblings('label'), не .siblings('label') потому $(this) это элемент, который вы связать событие щелчка к, что $('#front_set') (= ваш вход), и это ребенок от <label>, а не от его родного брата. Таким образом, вы должны пойти на уровень вверх, используя .parent():

$(document).ready(function() { 
 
    $('#front_set').click(function() { 
 
    if ($(this).is(':checked')) { 
 
     $(this).parent().siblings('label').html('checked'); 
 
    } else { 
 
     $(this).parent().siblings('label').html(' not checked'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="front_set">checked</label> 
 
<label class="switch-original right"> 
 
    <input type="checkbox" id="front_set"> 
 
    <span class="check"></span> 
 
</label>

То, что я не понимаю, что что <span class="check"></span> делать в коде? Он ничего не делает, и ваш код будет работать без него.

---

Улучшенная версия:

Вы не должны связывать события на click для галочки, а на change как флажки могут изменить свое значение без нажатия. Так вот лучший вариант это, скорее всего, работать на любом устройстве, в любом браузере:

$(document).on('ready', function() { 
 
    $.fn.extend({ 
 
    setLabel: function() { 
 
     var label = $('[for="'+$(this).attr('id')+'"]').eq(0); 
 
     $(label).text(($(this).is(':checked') ? '' : 'not ') + 'checked'); 
 
    } 
 
    }); 
 
    $('#front_set').on('change', function(){ 
 
    $(this).setLabel(); 
 
    }) 
 
    $('#front_set').setLabel(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="front_set">checked</label> 
 
<label class="switch-original right"> 
 
    <input type="checkbox" id="front_set"> 
 
</label>

Это также регистрирует проверку метки в виде функции JQuery, что позволяет вызовите его на любой элемент, используя .setLabel(). В этой версии я использовал GolezTrol's solution для выбора ярлыка, поскольку он добавляет гибкость (отношения между родителями и дочерними элементами между вводом и меткой больше не актуальны).