CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3511786
user3511786

Reputation: 63

css toggle switch status

So here is what I have for a toggle switch I'm using off of https://metroui.org.ua/inputs.html What Im trying to do is change the label thats before the switch/checkbox to say checked or not checked. If I click on the label it changes the switch but the text does not change. 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>

Upvotes: 2

Views: 2953

Answers (2)

tao
tao

Reputation: 90058

You need to change the parent().siblings('label'), not .siblings('label') because $(this) is the element you bind the click event to, which is $('#front_set') ( = your input) and that's a child of <label>, not a sibling of it. So you need to go up a level, using .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>

What I don't understand is what is that <span class="check"></span> doing in your code? It does nothing and your code would do well without it.

Improved version:

You shouldn't bind events on click to checkboxes, but on change, as checkboxes can change their value without being clicked. So here is a better version of it, most likely to work on any device, in any browser: 

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

This also registers the checking of the label as a jQuery function, enabling you to call it on any element using .setLabel(). In this version I used GolezTrol's solution for selecting the label, since it adds flexibility (the parent/child relation between input and label is no longer relevant).

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116110

The issue: The label is not a sibling of the clicked checkbox, so you won't find it using siblings. The label is actually a sibling of the label that is the parent of the checkbox.

The solution: Use a different selector to find the label, so their relative positions don't matter much anymore. Using label[for="xyz"] you can find exactly that label that is bound to checkbox xyz, regardless of its position in the document. This makes your code more flexible too, because it won't break immediately if you reorganize your 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>

Upvotes: 5

Related Questions