Question

所以这就是我用切换开关所用的https://metroui.org.ua/inputs.html 我想要做的是更改切换/复选框之前的标签，以表示已选中或未选中。如果我单击标签，它会更改开关，但文本不会更改。 JavaScript的：

＆＃13;

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

＆＃13;

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

＆＃13;

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来选择标签，因为它增加了灵活性（输入和标签之间的父/子关系不再相关）。

css切换开关状态

2 个答案: