Question

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

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

我的HTML

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

CSS很简单：

.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切换或toggleClass，我无法让它正常工作。

现在只需要翻转CSS类......

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

那会翻转一次，但没有正确装订，当我第二次点击时，它没有效果。

我尝试过使用这个例子; jQuery toggle class

但这似乎并不想工作，也不是其他各种Google搜索结果，但出于某种原因，我正在努力。

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

Answer 1

你试过吗

$('.checkedBox, .unCheckedBox').live('click', function () {
    $(this).toggleClass('checkedBox unCheckedBox');//toggle the class
    $(this).next().click();//click the checkbox
});

在此处http://jsfiddle.net/3uu2M/

Answer 2

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

更好的是，你可以只有一个标记所有“漂亮”复选框的类，然后是另一个修改默认风格的类。

可能是这样的：

CSS

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

然后你可以担心切换.checked类。

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

Answer 3

你有一个错字

  $(this).toggleClass('checkedBox').toggleClass('unCheckedBox');

您列出了checkedBox两次

这可能更容易阅读，或者您可以将调用合并到toggleClass()并与空格分开。

  $(this).toggleClass('checkedBox unCheckedBox');

http://api.jquery.com/toggleClass/

切换并重新切换类单击以制作漂亮的Checkbox

3 个答案:

CSS