如何使用jQuery根据复选框的状态切换dom元素?

时间:2017-01-04 02:16:15

标签: jquery class

我正在使用jQuery使用复选框状态来打开或关闭一些<div>元素。

我遇到的问题,缺乏要克服的技术知识,当有<div>分配了多个类时,无论其他指定类的状态如何,它们都会被切换

所以,我正在寻找的是一种切换<div>的方法,只有当所有类都被切换时才会切换。

    $(document).ready(function() {
      $('input[type="checkbox"]').click(function() {
        if ($(this).attr("value") == "foo") {
          $(".foo").toggle();
        }
        if ($(this).attr("value") == "bar") {
          $(".bar").toggle();
        }
        if ($(this).attr("value") == "foobar") {
          $(".foobar").toggle();
        }
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to Show/Hide:
<label>
  <input type="checkbox" name="typeCheckbox" value="foo" checked=checked>Foo</label>
<label>
  <input type="checkbox" name="typeCheckbox" value="bar" checked=checked>Bar</label>
<label>
  <input type="checkbox" name="typeCheckbox" value="foobar" checked=checked>FooBar</label>


<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foobar">FooBar</div>
<div class="foo bar">Foo and Bar, but not FooBar</div>
<div class="foo bar foobar">Foo, Bar and FooBar</div>

1 个答案:

答案 0 :(得分:1)

这个将根据选中的复选框切换div(例如:如果foo和bar打开,那么只有foobar会被隐藏,因为所有其他都包含foo或bar或两者)。

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var classes = [];
    $('input[type="checkbox"]').each(function(a, b) {
      if ($(b).prop("checked")) {
        classes.push($(this).attr("value"));
      }
    });
    var show=(classes.length>0);
    if(show) classes = classes.join(",.");
    $('.foo,.bar,.foobar').hide();
    if(show) $("." + classes).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to Show/Hide:
<label>
  <input type="checkbox" name="typeCheckbox" value="foo" checked=checked>Foo</label>
<label>
  <input type="checkbox" name="typeCheckbox" value="bar" checked=checked>Bar</label>
<label>
  <input type="checkbox" name="typeCheckbox" value="foobar" checked=checked>FooBar</label>


<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foobar">FooBar</div>
<div class="foo bar">Foo and Bar, but not FooBar</div>
<div class="foo bar foobar">Foo, Bar and FooBar</div>

如果您愿意,以下将进行严格检查:

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var classes = [];
    var classes2 = [];
    $('input[type="checkbox"]').each(function(a, b) {
      if ($(b).prop("checked")) {
        classes.push($(this).attr("value"));
      } else {
        classes2.push($(this).attr("value"));
      }
    });
    var show = (classes.length > 0);
    if (show) {
      classes = classes.join(",.");
    }
    $('.foo,.bar,.foobar').hide();
    if (show) {
      $("." + classes).show();
      $("." + classes).each(function(a, b) {
        for (var i = 0; i < classes2.length; i++)
          if ($(b).hasClass(classes2[i])) $(b).hide();
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to Show/Hide:
<label>
  <input type="checkbox" name="typeCheckbox" value="foo" checked=checked>Foo</label>
<label>
  <input type="checkbox" name="typeCheckbox" value="bar" checked=checked>Bar</label>
<label>
  <input type="checkbox" name="typeCheckbox" value="foobar" checked=checked>FooBar</label>


<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foobar">FooBar</div>
<div class="foo bar">Foo and Bar, but not FooBar</div>
<div class="foo bar foobar">Foo, Bar and FooBar</div>