Question

我正在尝试根据Checkbox检查并取消选中

来显示值

我有两个复选框MNC和Worth（仅限顶级），我试图显示或隐藏基于它的值（在类包面板div下显示）

这是我的代码

$(document).on('change', '.filtermnc', function() {
 $(".pack-panel").each(function () {
    var visible = $(this).find('.mnccheckbox').prop('checked')
   $(this).toggle(visible);
  });
  });


$(document).on('change', '.filterworth', function() {
 $(".pack-panel").each(function () {
    var visible = $(this).find('.worthcheckbox').prop('checked')
   $(this).toggle(visible);
  });
  });

当我尝试使用此代码时，它不起作用，并且它还检查所有相应的复选框

您能告诉我如何实现这一目标吗？ http://jsfiddle.net/F8Vk2/121/

Answer 1

将你的js改为

   $(document).on('change', '.filtermnc', function() {
    var visible = $(this).prop('checked')
    if(visible)
       $('.mnccheckbox').closest("li").show();
    else
       $('.mnccheckbox').closest("li").hide();
  });


$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
    if(visible)
       $('.worthcheckbox').closest("li").show();
    else
       $('.worthcheckbox').closest("li").hide();

  });

http://jsfiddle.net/F8Vk2/123/

Answer 2

我为一个人做了，但它只是改变另一个人的同事：

$(document).on('change', '.filterworth, .filtermnc', function() {
  var $this = $(this),
    isChecked = $this.is(':checked'),
    $packPanel = $('.pack-panel');

  isChecked ? $packPanel.show() : $packPanel.hide()

 });

您可以使用this来获取活动的目标，并验证它是否由.is(':checked')进行了检查。此外，您无需迭代$('.pack-panel')即可应用更改。 .toggle()会改变其前一个的可见性，因此我认为您应该硬编码来隐藏或显示面板。

Answer 3

您可以尝试 - ＆gt;

$(document).on('change', '.filtermnc', function() {
   $('.mnccheckbox').
     closest("li").
     toggle($(this).prop('checked'));
});

这基本上是使用.mccheckbox类查找所有内容，然后根据您分配事件的复选框的属性进行切换。

如何根据复选框更改事件隐藏或显示div

3 个答案: