选中复选框时隐藏祖父母类答案

【问题标题】：Hide grand-parent class when checkbox is checked选中复选框时隐藏祖父母类
【发布时间】：2021-03-03 20:02:37
【问题描述】：

选中复选框 (wfob_checkbox) 时，我需要隐藏下面的第一个类 (wfob_wrap)。我尝试了很多方法都没有成功。

谁能帮我解决这个问题？

谢谢！

<div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked="">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这样的东西应该可以工作：document.querySelector(".wfob_checkbox").addEventListener("change", () => document.querySelector("#wfob_wrap > div").style.display = document.querySelector(".wfob_checkbox").checked ? "none" : "");

标签： javascript css class checkbox parent

【解决方案1】：

你可以这样使用：

document.querySelector('[type=checkbox]').addEventListener('change', e => {
  e.target.closest('#wfob_wrap').firstElementChild.style.display = 'none';
});

<div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked="">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我使用.closest(..) 获取#wfob_wrap 元素并使用.firstElementChild 获取此元素的第一个子元素。

在这种特定情况下，由于您要查找的元素有一个 id，因此您不需要.closest(..)，您可以直接使用document.getElementById('wfob_wrap') 获取该元素。

【讨论】：

如果复选框已经被选中，这将不起作用
有ID时不需要使用最近的

【解决方案2】：

我为javascript和jquery提供了两种解决方案。有必要吗？

jquery 版本：

$('.wfob_checkbox.wfob_bump_product').click(function(){
  if($(this).is(':checked')) {
     $(this).closest('#wfob_wrap .wfob_wrapper').css('display', 'none');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

javascript 版本：

let checkbox = document.querySelector('.wfob_checkbox.wfob_bump_product');

checkbox.onclick = function() {
  if (this.checked) {
    this.closest('.wfob_wrapper').style.display = 'none';
  }
}

<div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

如果复选框已经被选中，这将不起作用。当你有一个 ID 时也不需要最近的
这是一个 jQuery 答案，这个问题没有用 jQuery 标记。
@caramba，问题的作者并没有说他对 Javascript 的严格要求，更重要的是，我给出了 Javascript 的第二个版本。
@mplungjan，问题的作者在他的问题描述中没有要求这个。

【解决方案3】：

试试这个

它可以处理复选框在加载时被选中

第一个用于一个复选框，第二个用于多个复选框。

const toggle = function() {
  const chk = document.querySelector(".wfob_checkbox");
  chk.closest(".wfob_wrapper").classList.toggle("hide", chk.checked)
};  
window.addEventListener("load",function() {
  document.querySelector(".wfob_checkbox").addEventListener("click",toggle)
  toggle()
});

.hide { display:none; }

<div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果你有更多的集合，你不能使用 IDs

window.addEventListener("load", function() {
  document.getElementById("container").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("wfob_checkbox")) {
      tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)
    }
  });
  
  // loading
  [...document.querySelectorAll(".wfob_checkbox:checked")].forEach(tgt => 
      tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)
  )    
  
});

.hide {
  display: none;
}

<div id="container">

  <div class="wfob_wrap_start">
    <div class="wfob_wrapper" data-wfob-id="72396">
      <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
        <div class="wfob_outer">
          <div class="wfob_Box">
            <div class="wfob_bgBox_table no_table">
              <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
                <div class="wfob_order_wrap wfob_content_bottom_wrap">
                  <div class="wfob_bgBox_table_box">
                    <div class="wfob_bgBox_cell wfob_img_box">
                      <div class="wfob_checkbox_input_wrap">
                        <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="wfob_wrap_start">
    <div class="wfob_wrapper" data-wfob-id="72396">
      <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
        <div class="wfob_outer">
          <div class="wfob_Box">
            <div class="wfob_bgBox_table no_table">
              <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
                <div class="wfob_order_wrap wfob_content_bottom_wrap">
                  <div class="wfob_bgBox_table_box">
                    <div class="wfob_bgBox_cell wfob_img_box">
                      <div class="wfob_checkbox_input_wrap">
                        <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked>
                      </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

【讨论】：