Question

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

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

基本上我正在构建一个Web表单供人们自定义笔。所以他们需要选择他们想要的颜色印记。我想要展示一个颜色的样本，而不仅仅是一个无聊的颜色列表。所以我想我会创建一个列表，放一些复选框，这样他们就可以选择颜色并使用CSS来隐藏实际的复选框，这样它就很好又干净。我看到了为单选按钮完成此操作的代码，我的工作正常。我试图将它改编为复选框，但问题是你只能选择一个单选按钮而是多个复选框。

给你一个半功能的例子。如果您前往测试网站，它是现场（不是我认识的好习惯）并尝试自定义笔，您可以看到我正在尝试做什么。 Pensfast.com Beta

Answer 1

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

$("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显然，如果选择器错误，此答案将无效。尝试将第一行更改为：

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

此代码适用于this page。

Answer 2

这对我有用 - 它还可以容纳多个复选框，每个复选框都可以具有不同的初始状态。

<强> CSS：

.dragable { margin: 4px; border: 1px solid #c6e1ff; line-height: 15px;}
.dragable.selected, .dragable.unselected.selected  {background: #ebf5ff;}
.dragable.unselected {background: #ffffff;}

<强> HTML：

<ul id="sortable">
    <li class="dragable selected ui-state-default">
    <input name="list" type="checkbox"  checked="checked" />Results</li>
    <li class="dragable unselected ui-state-default">
    <input name="list" type="checkbox" />Benefits </li>
</ul>

Javascript：

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

希望这有帮助！

Answer 3

尝试：

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected')
        .children("input:checkbox:first").attr('checked',true);
});

我可以问你为什么要在复选框上点击“点击”？

如果您想选中或取消选中复选框，请阅读this。

<强>更新

试试这个：

$("li.imprint").click(function() {
      $(this).toggleClass('selected')
      $(':checkbox',this).attr('checked',$(this).is('selected'));
 });

jQuery toggleClass并选中复选框

3 个答案: