css切换开关状态答案

【问题标题】：css toggle switch statuscss切换开关状态
【发布时间】：2016-01-11 09:35:41
【问题描述】：

这就是我正在使用的拨动开关 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>

【问题讨论】：

@WhiteHat for 属性将标签链接到具有该 ID 的输入元素。如果您仔细阅读，您会看到复选框已经具有该 ID。您的建议会使 HTML 无效，并导致标签不再代表复选框响应点击。
用改进的版本更新了我的答案，将检查注册为 jQuery 函数，在 window.ready() 和 change 事件上运行它。

标签： javascript jquery html css

【解决方案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>

【讨论】：

您的解决方案更加灵活。
非常感谢！看起来这很适合我想做的事情。
有一个问题，有没有办法可以设置初始状态？我可以轻松地设置开关位置。我用这个来做到这一点： $("#front_set").prop('checked', true);

【解决方案2】：

您需要更改parent().siblings('label')，而不是.siblings('label')，因为$(this) 是您将点击事件绑定到的元素，即$('#front_set')（= 您的输入），它是@987654326 的子元素@，不是它的兄弟姐妹。所以你需要上一层，使用.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 来选择标签，因为它增加了灵活性（输入和标签之间的父/子关系不再相关）。

【讨论】：