Jquery 选中相关复选框时如何切换内容

我无法理清我的逻辑！我在div中有4个复选框（称为“bandPackageCheck”），每个复选框在单击时会显示不同的内容（在称为“greenBox”的div中）

当我单击一个复选框时，我希望它在其各自的“绿框”div中“滑动切换”，但其他复选框不做任何操作（除非稍后单击）。然后，如果用户确实单击了另一个按钮，我想让以前单击的按钮保持打开状态（除非用户单击以关闭它们）

我给了4个复选框ID，但不想为每个复选框使用不同的代码。我怎样才能有效地做到这一点

HTML:

JQUERY：

var checkbox = $(".bandPackageCheck");
var greenBox = $(".greenBox");

$(checkbox).on('change', function(){
    if (this.checked){
        $(greenBox).slideToggle(200);
        $(greenBox).not(this).hide();
    } else {
       $(greenBox).slideToggle(200);
      }
});

---

谢谢你提供的任何建议！我对jQuery也有点陌生，所以我可能不知道最高级的方法

使用

slideDown

和

slideUp

可以更清晰地显示，而不是使用

toggle

。然后，更具体地说明要操作哪个元素。还有，为什么选中复选框时要隐藏任何内容？最后，除非需要事件委派，否则不要在上使用

。这只会使代码更加复杂

// don't bother creating a variable for this unless you need it elsewhere
$('.bandPackageCheck input[type="checkbox"]').change(function() {

     // up to the first ancestor .bandPackageCheck encountered, 
    //  then across to the next sibling .greenBox
    var box = $(this).closest('.bandPackageCheck').next('.greenBox');

    if (this.checked) {
        // checked => down; don't leave room for ambiguity with toggle
        $(box).slideDown(200);
    } else {
        $(box).slideUp(200);
    }
});


请注意，我通过关闭所有
.greenBox
元素纠正了错误的HTML。
使用
向下滑动
和
向下滑动
，而不是
切换
。然后，更具体地说明要操作哪个元素。还有，为什么选中复选框时要隐藏任何内容？最后，除非需要事件委派，否则不要在
上使用
。这只会使代码更加复杂

// don't bother creating a variable for this unless you need it elsewhere
$('.bandPackageCheck input[type="checkbox"]').change(function() {

     // up to the first ancestor .bandPackageCheck encountered, 
    //  then across to the next sibling .greenBox
    var box = $(this).closest('.bandPackageCheck').next('.greenBox');

    if (this.checked) {
        // checked => down; don't leave room for ambiguity with toggle
        $(box).slideDown(200);
    } else {
        $(box).slideUp(200);
    }
});


请注意，我通过关闭所有
.greenBox
元素纠正了错误的HTML。
您正在查询的元素复选框是错误的。您正在查询包含复选框的div，而不是复选框本身。应该是

var checkbox=$（'.bandPackageCheck输入[type=“checkbox”]”）

这里提到的是另一种使用香草javascript的解决方案。它利用CSS转换来制作幻灯片动画


JS

CSS

HTML


检查我！
下面是复选框1的一些重要内容。
检查我#2！
下面是复选框2的一些重要内容。
您要查询的元素复选框错误。您正在查询包含复选框的div，而不是复选框本身。应该是

var checkbox=$（'.bandPackageCheck输入[type=“checkbox”]”）

这里提到的是另一种使用香草javascript的解决方案。它利用CSS转换来制作幻灯片动画


JS

CSS

HTML


检查我！
下面是复选框1的一些重要内容。
检查我#2！
下面是复选框2的一些重要内容。
虽然技术上令人印象深刻，但阅读起来相当困难，这取决于标记中递增的属性值。虽然技术上令人印象深刻，但阅读起来相当困难，这取决于标记中递增的属性值。
// don't bother creating a variable for this unless you need it elsewhere
$('.bandPackageCheck input[type="checkbox"]').change(function() {

     // up to the first ancestor .bandPackageCheck encountered, 
    //  then across to the next sibling .greenBox
    var box = $(this).closest('.bandPackageCheck').next('.greenBox');

    if (this.checked) {
        // checked => down; don't leave room for ambiguity with toggle
        $(box).slideDown(200);
    } else {
        $(box).slideUp(200);
    }
});

const checkboxes = Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]'));
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', e => {
    let {checked} = e.currentTarget;
    let {id} = e.currentTarget.dataset;
    let contentWrap = document.querySelector(`.content[data-id="${id}"]`);
    let inner =  document.querySelector(`[data-id="${id}"] .inner`);
    if(checked) {
      contentWrap.style.height = window.getComputedStyle(inner).getPropertyValue('height');
    } else{
      contentWrap.style.height = 0;
    }
  });
});

label {
  display: block;
}
.content {
  height: 0;
  transition: .25s height ;
  overflow: hidden;
}

<label>
  <input data-id="1" type="checkbox">
  Check ME!
</label>

<div data-id="1" class="content">
  <div class="inner">
  Here is some great content for checkbox 1.
  </div>
</div>

<label>
  <input data-id="2" type="checkbox">
  Check ME #2!
</label>

<div data-id="2" class="content">
  <div class="inner">
      Here is some great content for checkbox 2.
  </div>
</div>