jQuery toggleClass并选中复选框 [英] jQuery toggleClass and check checkbox

问题描述

我似乎无法使此工作。如果我删除脚本的复选框部分toggle类工作，但如果我添加它，那么它不再切换的类。我是一个业余爱好者在这里，所以我会非常感谢任何帮助。我使用jQuery版本1.4.1。谢谢。

I can't seem to get this to work. If I remove the checkbox portion of the script the toggle class works but if I add it, then it no longer toggle's the class. I'm a total amateur at this so I would greatly appreciate any help. I'm using jQuery version 1.4.1. Thanks.

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected').children("input[@type=checkbox]")[0].click();
});

基本上我正在建立一个网页表单供人们自定义笔。所以他们需要选择他们想要什么颜色印记。而不是一个无聊的颜色列表，我想显示一个色板的色板。所以我想我会创建一个列表，放置一些复选框，以便他们可以选择颜色，并使用CSS隐藏实际的复选框，所以它都很好，干净。我看到代码完成这个单选按钮，我得到工作正常。我试图适应它复选框，但问题是，你只能选择一个单选按钮，但多个复选框。

So essentially I'm building a web form for people to customize pens. So they need to choose what color imprint they want. Rather than just a boring list of colors, I wanted to show a swatch of the color. So I figured I would create a list, put some checkboxes so they can select the colors and use CSS to hide the actual checkbox so it's all nice and clean. I saw the code to accomplish this for radio buttons and I got that working fine. I tried to adapt it to checkboxes but the problem was that you can only select one radio button but multiple checkboxes.

为您提供一个半功能示例。如果你前往测试版网站，它是现场（不是一个好的做法，我知道），并尝试自定义一支笔，你可以看到我想做什么。 Pensfast.com Beta

To give you a semi-function example. If you head to the beta site, it's live (not a good practice I know) and try to customize a pen you can see what I'm trying to do. Pensfast.com Beta

推荐答案

鉴于您更新的详细信息，这是您想要的：

Given your updated details, this is what you want:

$("li.imprint").click(function(){
    var $checkbox = $(this).toggleClass('selected').find(':checkbox');
    if($(this).hasClass('selected')) {
      $checkbox.attr('checked','checked');
    } else {
      $checkbox.removeAttr('checked');
    }
})

我担心你的课程不正确。你在你的问题中引用 li.imprint ，但是我在你的网站上访问的页面有 li.Barellimprint 显然，如果选择器是错误的，这个答案将不工作。尝试将第一行改为：

I am concerned that your classes are incorrect. You reference li.imprint in your question, but the page I visiting on your site had the class of li.Barellimprint Obviously, this answer won't work if the selectors are wrong. Try changing the first line to :

$("li.Barrelimprint").click(function(){

此代码适用于此页。

这篇关于jQuery toggleClass并选中复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！