切换并重新切换点击类以制作漂亮的复选框

Posted 2023-02-25

【中文标题】切换并重新切换点击类以制作漂亮的复选框

【英文标题】：Toggle and re-Toggle class on Click to make pretty Checkbox

【发布时间】：2011-11-25 14:59:01

【问题描述】：

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

我正在尝试使用带有背景图标和隐藏复选框的 <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 toggle 或 toggleClass 来做到这一点，但我无法让它正常工作。

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

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

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

我试过用这个例子； jQuery toggle class

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

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

【参考方案1】：

由于您在两条 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');
);

【讨论】：

太棒了！太棒了，我知道那里有一些非常简单的东西！

【参考方案2】：

你试过了吗

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

在这里提琴http://jsfiddle.net/3uu2M/

【参考方案3】：

你有错别字

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

checkedBox 列出了两次

这可能更容易阅读，或者您可以合并对 toggleClass() 的调用并用空格分隔。

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

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

【讨论】：

Arrghh....虽然您是对的，但我感谢您发现故意的错误...它仍然不起作用！

@Jamie - 我打赌问题出在你没有发布的代码中。

我不确定，但来自richardneililagan 的回答给了我我真正需要的东西，所以我打算这样做。谢谢:)