选中复选框时隐藏祖父母班级

Question

当选中复选框（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>

Answer 1

尝试这个它可以处理加载时选中复选框的情况第一个用于一个复选框，第二个用于多个复选框。const toggle = function() {&nbsp; const chk = document.querySelector(".wfob_checkbox");&nbsp; chk.closest(".wfob_wrapper").classList.toggle("hide", chk.checked)};&nbsp;&nbsp;window.addEventListener("load",function() {&nbsp; document.querySelector(".wfob_checkbox").addEventListener("click",toggle)&nbsp; toggle()});.hide { display:none; }<div id="wfob_wrap" class="wfob_wrap_start">&nbsp; <div class="wfob_wrapper" data-wfob-id="72396">&nbsp; &nbsp; <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; <div class="wfob_outer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_Box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table no_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_order_wrap wfob_content_bottom_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_cell wfob_img_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_checkbox_input_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="wfob_bump_checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="wfob_checkbox wfob_bump_product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>如果有更多集合，则不能使用 IDwindow.addEventListener("load", function() {&nbsp; document.getElementById("container").addEventListener("click", function(e) {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; if (tgt.classList.contains("wfob_checkbox")) {&nbsp; &nbsp; &nbsp; tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)&nbsp; &nbsp; }&nbsp; });&nbsp;&nbsp;&nbsp; // loading&nbsp; [...document.querySelectorAll(".wfob_checkbox:checked")].forEach(tgt =>&nbsp;&nbsp; &nbsp; &nbsp; tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)&nbsp; )&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;});.hide {&nbsp; display: none;}<div id="container">&nbsp; <div class="wfob_wrap_start">&nbsp; &nbsp; <div class="wfob_wrapper" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_outer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_Box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table no_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_order_wrap wfob_content_bottom_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_cell wfob_img_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_checkbox_input_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="wfob_bump_checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="wfob_checkbox wfob_bump_product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="wfob_wrap_start">&nbsp; &nbsp; <div class="wfob_wrapper" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_outer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_Box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table no_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_order_wrap wfob_content_bottom_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_cell wfob_img_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_checkbox_input_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="wfob_bump_checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

我给出了javascript和jquery的两种解决方案。有必要吗？jquery版本：$('.wfob_checkbox.wfob_bump_product').click(function(){&nbsp; if($(this).is(':checked')) {&nbsp; &nbsp; &nbsp;$(this).closest('#wfob_wrap .wfob_wrapper').css('display', 'none');&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="wfob_wrap" class="wfob_wrap_start">&nbsp; <div class="wfob_wrapper" data-wfob-id="72396">&nbsp; &nbsp; <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; <div class="wfob_outer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_Box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table no_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_order_wrap wfob_content_bottom_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_cell wfob_img_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_checkbox_input_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="wfob_bump_checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="wfob_checkbox wfob_bump_product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>JavaScript 版本：let checkbox = document.querySelector('.wfob_checkbox.wfob_bump_product');checkbox.onclick = function() {&nbsp; if (this.checked) {&nbsp; &nbsp; this.closest('.wfob_wrapper').style.display = 'none';&nbsp; }}<div id="wfob_wrap" class="wfob_wrap_start">&nbsp; <div class="wfob_wrapper" data-wfob-id="72396">&nbsp; &nbsp; <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">&nbsp; &nbsp; &nbsp; <div class="wfob_outer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_Box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table no_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_order_wrap wfob_content_bottom_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_table_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_bgBox_cell wfob_img_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wfob_checkbox_input_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="wfob_bump_checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="wfob_checkbox wfob_bump_product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

你可以使用这样的东西：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')。