Question

之前我已经获得了两个脚本的帮助，对此我真的非常感谢！我希望有人可以再次提供帮助。

一个脚本允许我显示/隐藏UL子级，并取消选中其他父级复选框。

第二个脚本用于当标签不存在时的“复选框”按钮。

两者都是jquery解决方案。目前的问题是两个脚本相互冲突。我制作了一个Codepen来显示问题。

重要的是，我无法直接更改HTML，但确实可以在页面上使用jquery。

因此，当前复选框已消失，您可以通过选择父类别来显示和隐藏子项。但是第二个脚本（使复选框处于选中状态）似乎覆盖了某些内容。使用第一个脚本，显示和隐藏。如果您单击父类别或任何其他父类别，则取消选择所有子类别。

如果您禁用没有标签的复选框按钮脚本，则显示隐藏功能将按预期工作。但是然后我又有了复选框。

以下是指向密码笔的链接：

https://codepen.io/mjthehunter/pen/YgaOxr

<!-- Hide/Unhide Categories -->
$('.fes-category-checklist > li > label.selectit > input[name^="download_category"]').change(function() {
  var categoryId = this.value;
  var $checkbox = $(this);

  $('.fes-category-checklist')
    .find('li[id^="download_category"]')
    .attr('data-open', function(index, value) {
      return this.id.endsWith(categoryId) && value === 'false';
    });

  $checkbox
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});


$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});


<!-- checkbox button with no label -->
$(document).ready(function(){
  $('.fes-category-checklist, .fes-category-checklist .children').addClass('nolist');

  $('.selectit').addClass('checkbutton');

  $('.checkbutton').click(function(){
    if( $(this).children('input:checkbox').is(':checked') ) {
         $(this).addClass('ischecked');
    } else {
      $(this).removeClass('ischecked');
    }
  });  

});

我真的希望有人能提供帮助。谢谢！

莫顿

Answer 1

在您的复选框的更改事件中，您正在将所有其他复选框设置为不使用此代码进行检查：

$checkbox
.closest('ul')
.find('input[name^="download_category"]')
.not(this)
.prop('checked', false);

但是，您不会删除随“无标签的复选框按钮”脚本添加的ischecked类。您还必须删除它。...像这样：

$checkbox
.closest('ul')
.find('input[name^="download_category"]')
.not(this)
.prop('checked', false)
.parent().removeClass('ischecked'); // <-- add this to remove isSelected class

这是更新后的codepen

没有标签的jQuery Checkbox按钮-显示/隐藏UL子级

1 个答案: