Question

我正在尝试为我的新网站完成产品页面和购物篮模板的设计，但我无法将所有部分组合在一起。

在下面的html代码中，使用<div class="ct-cart"></div>调用购物车/购物篮，但我需要以某种方式显示或消隐，以便客户必须勾选复选框以同意条款他们可以与购物车/购物篮互动之前的条件。

我已经尝试了一些我在网上找到的脚本试图隐藏它但是无法让它工作，即使在（希望）删除任何jQuery冲突之后也是如此。

非常感谢任何帮助。

<p style="text-align:center">
  <input type="checkbox" name="tandc" id="tandc" value="true" class="form-control"><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
<div class="ct-cart"></div>

Answer 1

纯JS实现。（如果你真的不需要jquery）

＆＃13;

document.getElementById('tandc').onchange = function(){
  var cart = document.getElementsByClassName('ct-cart')[0];
  if (this.checked) cart.classList.remove('hide');
  else cart.classList.add('hide');
}

＆＃13;

.hide{
display: none;
}

＆＃13;

<p style="text-align:center">
  <input type="checkbox" name="tandc" id="tandc" value="true" class="form-control"><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
<div class="ct-cart hide">Shown only if checked :)</div>

＆＃13;

Answer 2

这样的事情：（更改复选框上的事件会触发购物车div上的可见性类）

＆＃13;

$('#tandc').on('change', function(){
  if ($(this)[0].checked) {
    $('.ct-cart').addClass('ct-cart-visible');
  } else {
    $('.ct-cart-visible').removeClass('ct-cart-visible');
  }
})

＆＃13;

/* I would use special classes for showing/hiding, just to give more flexibility on styling, how the cart appears */
.ct-cart {
  display: none;
}

.ct-cart-visible {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="text-align:center">
   <input type="checkbox" name="tandc" id="tandc" value="true"
                                               class="form-control"><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
                                <div class="ct-cart">CART CONTENTS</div>

＆＃13;

Answer 3

当复选框change时，你需要运行一个函数。

if复选框is :checked，show() .ct-cart。否则hide购物车。

$('#tandc').change(function(){
  if($(this).is(":checked")){
    $(".ct-cart").show();
  }else{
    $(".ct-cart").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="text-align:center">
  <input type="checkbox" name="tandc" id="tandc" value="true" class="form-control"><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
<div class="ct-cart" style="display:none;">
  Cart
</div>

Answer 4

另一种方法：

function toggle() {

  // convert the NodeList returned by document.querySelectorAll()
  // into an Array, using Array.from():
  Array.from(

    // using document.querySelectorAll() to find the elements that
    // match the selector returned from changed-element's
    // custom data-toggle attribute:
    document.querySelectorAll(this.dataset.toggle)

  // iterating over the Array of nodes:
  ).forEach(

    // using an Arrow function - which avoids changing the
    // 'this' - to toggle the class of 'hidden' depending
    // on whether the changed-checbox is currently checked
    // or not (applying the class-name if the evaluation is
    // true, removing it if false):
    el => el.classList.toggle('hidden', !this.checked)
  );
}

// creating a custom Event (albeit in this case it's the
// browser's 'change' event):
let changeEvent = new Event('change'),

// caching a reference to the relevant element upon which
// the function should fire:
    check = document.getElementById('tandc');


// binding the toggle() function (note the deliberate lack of
// parentheses) as the event-handler for the 'change' event:
check.addEventListener('change', toggle);

// firing the 'change' event on page load,
// in order that the relevant element will be
// shown or hidden appropriately:
check.dispatchEvent(changeEvent);

function toggle() {
  Array.from(
    document.querySelectorAll(this.dataset.toggle)
  ).forEach(
    el => el.classList.toggle('hidden', !this.checked)
  );
}

let changeEvent = new Event('change'),
  check = document.getElementById('tandc');



check.addEventListener('change', toggle);
check.dispatchEvent(changeEvent);

.ct-cart {
  opacity: 1;
  transition: opacity 0.5s linear;
}

.hidden {
  opacity: 0.1;
}

<p style="text-align:center">
  <input type="checkbox" name="tandc" id="tandc" value="true" class="form-control" data-toggle=".ct-cart" /><label for="tandc"> Please tick box above to confirm you agree with the <a href="terms.html" title="View terms and conditions of use">Terms &amp; Conditions</a>.</label>
</p>
<div class="ct-cart">Cart content</div>

参考文献：

JavaScript的：
- Array.prototype.forEach()。
- Array.from()。
- Arrow functions。
- Element.classList API。
- Element.datalist。

隐藏/删除div直到选中复选框

4 个答案: