即使发现父母的父母，父母也无法工作

Question

嗨，我在我的页面中重复了以下html（显然是每个实例中的名称，for和id属性更改）：

<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox"  name="uniqueName" id="uniqueName" />
</div>

这对某些CSS的作用是使一个大按钮的外观，输入是隐藏的，我根据输入的检查值添加了一个类。我使用以下JavaScript/jQuery进行此

$(".funkyCheckBox").live("click, tap", function(event){
    $(this).toggleClass("funkyCheckBoxActive");
    var nextCheckBox = $(this).find("input[type=checkbox]");
    nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});

现在这一切都很好，但是在测试过程中，我注意到，如果您单击标签文本，则没有应用类，并且输入值未切换...因此，我添加了以下...

$(".funkyCheckBox label").live("click, tap", function(event){                  
    $(this).parent("div").toggleClass("funkyCheckBoxActive");
    var nextCheckBox = $(this).next("input[type=checkbox]");
    nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
}); 

现在，这很棒，因为单击标签文本现在更改了输入的值，但是父级未参加/切换" FunkyCheckBoxActive"类。我不确定为什么当我在回调函数中使用console.log($(this).parent("div"))时，我正在输出th dom对象的属性。有人知道为什么我的toggleClass没有应用吗？

Answer 1

根据jQuery的版本，您的代码是否可以工作。请注意，当您单击引用它的标签时，浏览器已经在切换复选框；因此，您只需要这样做：

$('#uniqueName').change(function() {
    $(this).parents("div").toggleClass("funkyCheckBoxActive");
});

Answer 2

请使用" on"方法而不是" live"。标签标签中的" for"属性指向现有ID。

这是校正和工作代码：

<div class="funkyCheckBox">
    <label for="uniqueName"> Whatever Text </label>
    <input type="checkbox"  name="uniqueName" id="uniqueName" />
</div>

和

$(".funkyCheckBox label").click(function(event){
     $(this).parent("div").toggleClass("funkyCheckBoxActive");
     var nextCheckBox = $(this).next("input[type=checkbox]");
     var nextCheckBoxValue = nextCheckBox.val();
     nextCheckBox.val(! nextCheckBoxValue);
}); ​

编辑：这是JSFIDDLE链接

http://jsfiddle.net/ruywt/

edit2： @mike sav：我已经修改了您的代码，现在正在使用所有可能的情况：http://jsfiddle.net/ruywt/11/