将复选框重置为基于先前复选框的页面加载状态's状态

Reset checkboxes to page-load state based on prior checkbox's state

本文关键字：状态 复选框 加载 于先前      更新时间：2023-09-26

我有一个页面，它有一个表单和一个生成的内容区域，通过复选框隐藏了部分和子部分。（复选框隐藏在页面上，但不在小提琴上，以显示复选框的"已检查"状态）

这是小提琴。它看起来可能很多，但坚持住，它真的不是。我有一个应该很容易的问题，让我告诉你问题在哪里。

我正在尝试为页面添加功能，这样当用户从左侧窗格中取消选择某个部分的所有子部分时，该部分作为一个整体隐藏在左侧，右侧表单可以让您知道整个部分被隐藏（红色文本在小提琴中），但不允许更改子部分以保持持久性。我可以通过单击左侧窗格中的子部分来隐藏所有子部分，左侧部分消失，右侧子部分隐藏起来，通知您的右侧标题隐藏在左侧。问题在于，当单击右侧标题以取消隐藏左侧的部分时，子部分不再可见或"重置"。

以下是用于检查是否所有子部分都被隐藏的代码：

if (($('fieldset.abstract > div > input:checkbox:checked').length+1) == 7){
    //Left Side
    $('.block > .abstract > .superseven > section input').each(function(){
        $(this).prop('checked' , true);
    });
    $('.block > .abstract > .superseven > section').eq(index).hide();  
    $('.block > .abstract').hide("slow");
    //Right Side
    $('fieldset.abstract label:first').toggleClass('hidden');
    $('fieldset.abstract > div > input').each(function(){
            $(this).prop('checked' , false);
    });
    $('fieldset.abstract > div > label').each(function(){
            $(this).hide("slow");
    });

只有在所有子部分都被隐藏之后，我才能将复选框"重置"为页面加载？应该是，一旦用户单击右侧的部分标题将该部分放回左侧，所有子部分都是可见的。

  • 如果我在点击右部分标题时应用一个正则条件（类似于JS中标记为//Toggle Section completely的下部分），那么当只隐藏了几个小节，然后隐藏了整个部分时，它将无法保持持久性
  • 我在想，如果我跟踪一个状态变量，但不知道Jquery中的变量范围，这可能是可能的（我认为它必须是全局的，我认为这不是一个好的做法）

  • 或者Jquery的整个部分可以封装在一个自调用函数中，如下所示：

    （函数名（）｛…｝）（）；

我还可以使用其他编程方法吗？

很抱歉，这是js/jquery的新手，我希望小提琴能帮助你，而不是伤害你。

澄清应该发生的事情：

  • 单击左侧的所有子部分，它们就会消失
  • 右侧的子部分（仅标签，因为所有复选框在活动页面中都不可见）应该消失
  • 右侧部分标题应变为红色
  • 单击右侧部分标题
  • 左侧部分应该出现（直到这里，所有这些都在起作用，这里是它中断的地方）并且左侧的所有子部分都应该可见，就好像它被重置了一样（与页面加载时相同，但仅针对这个特定部分，因为有多个这样的部分），因为用户隐藏了所有子部分，所以整个部分都被隐藏了，现在，用户希望返回左侧部分，并且所有子部分都应该可见

注：

当前工作功能：

  • 从页眉隐藏整个节
  • 隐藏除一个子部分外的所有子部分
  • 隐藏子部分，然后选择隐藏整个部分，并在取消隐藏整个部分时保持持久性

对于初始块的问题，我认为这是一个宽度问题，尝试更改一些宽度，尝试14.28而不是14.326-647564469914，（我通过IPad做出响应，使用该设备工作正常）

总结注释，此代码：重置初始情况并正确设置子节的宽度

if(!$('.block > .abstract').is(':visible')) {
      $('fieldset.abstract #abstract_all').prop('checked' , false);
      $('.superseven ').children().show();
      var width = ((1/7)*100);
      $('.superseven ').find('div').css("width", width + '%')
相关文章：