1

嗨，我在我的页面中重复了以下 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"));
});

现在这一切都很好，但是在测试期间我注意到如果您单击标签文本，则不会应用该类并且不会切换输入的值...因此我添加了以下内容...

$(".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的没有被申请？

4

2 回答 2

0

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

$('#uniqueName').change(function() {
    $(this).parents("div").toggleClass("funkyCheckBoxActive");
});
于 2014-07-15T05:37:17.283 回答
-2

请使用“on”方法而不是“live”，因为它已被弃用。LABEL Tag 中的“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);
}); ​

​</p>

编辑：这里是 jsFiddle 链接

http://jsfiddle.net/RUYWT/

EDIT2： @Mike Sav：我已经修改了您的代码，现在它正在处理所有可能的情况：http: //jsfiddle.net/RUYWT/11/

于 2012-10-23T10:15:28.503 回答