关于 jquery:Toggle and re-Toggle class on Click to make pretty Checkbox

Toggle and re-Toggle class on Click to make pretty Checkbox

这似乎是我不应该浪费一个问题的东西，但我无法让它发挥作用！

我正在尝试使用带有背景图标和隐藏复选框的 <span> 制作一个漂亮的复选框。

我的 HTML 是

1 2	<span class="checkedBox" id="mailing_Check"></span> <input type="checkbox" id="mailing" /> <!--(currently not hidden for testing)-->

CSS 很简单：

1 2	.checkedBox { background: url('../images/iconLine.png'); background-position: -550px, 0px; display: inline-block; width: 25px; height: 25px } .unCheckedBox { background: url('../images/iconLine.png'); background-position: -575px, 0px; display: inline-block; width: 25px; height: 25px }

我需要将 onClick 处理程序绑定到 checkedBox 项，将类切换/翻转为 unCheckedBox 并将复选框设置为选中。

现在，我有各种冗长的方法来做到这一点，但我试图使用 jQuery toggle 或 toggleClass 来做到这一点，但我无法让它正常工作。

现在只是在翻转 CSS 类...

1
2
3

$('.checkedBox, unCheckedBox').live('click', function () {
$(this).toggleClass('checkedBox').toggleClass('checkedBox');
});

这样会翻转一次，但是没有正确绑定，当我点击第二次时，它没有效果。

我试过用这个例子； jQuery 切换类

但这似乎并不想工作，还有其他各种谷歌搜索结果，但由于某种原因我很挣扎。

我想使用变量的最低要求将代码保持在最低限度，就像我说的，我有一些使用 if/else 逻辑的冗长方法，但我认为 jQuery 应该让它更容易！ :)

由于您在两条 CSS 规则(.checkedBox 和 .unCheckedBox)上修改完全相同的 CSS 样式属性，我想您不必切换 .checkedBox 类，因为另一个只是覆盖它。

更好的是，您可以只使用一个标记所有"漂亮"复选框的类，然后使用另一个修改默认样式的类。

可能是这样的：

CSS

1 2	.pretty-checkbox { /* default style rules / } .pretty-checkbox.checked { / style rules when checked */ }

然后你就可以放心切换 .checked 类了。

1
2
3

$('.pretty-checkbox').live('click', function (e) {
$(this).toggleClass('checked');
});