Question

您好我在我的页面中重复了以下HTML（显然，每个实例中的名称，for和id属性都会发生变化）：

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

这对一些CSS的作用是使得给出一个大按钮的外观，输入是隐藏的，我根据输入的检查值向div添加一个类。我使用以下JavaScript / jQuery

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

现在这一切都很好但是在测试过程中我注意到如果你单击标签文本，那么类没有被应用，输入的值也没有被切换......因此我添加了以下内容... < / p>

$(".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"));
});

现在这很好，因为单击标签文本现在会更改输入的值，但父DIV不会/切换“funkyCheckBoxActive”类。我不确定为什么然后我在回调函数中使用console.log($(this).parent("div"))并且我输出了dom对象的属性。有谁知道为什么我的toggleClass没有被应用？

Answer 1

根据jQuery的版本，您的代码是否有效。请注意，当您单击引用它的标签时，浏览器已经切换复选框;所以你只需要这样做：

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

Answer 2

请使用“on”方法代替“live”，因为它已被弃用。 LABEL标签中的“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/

即使找到父级，父级上的toggleClass（）也无法正常工作

2 个答案: