Question

我在jQuery上有点像菜鸟，所以这里......

我有3个复选框，如果选中其中一个复选框，我想要隐藏我的标签，但我希望所有其他人在未选中时取消隐藏，然后同时检查2个复选框我想隐藏所有与这些复选框相关的内容

我希望这是有道理的，任何帮助都是非常好的

非常感谢

<input type="checkbox" class="example" id="check1"><label>check1</label>
<input type="checkbox" class="example" id="check2"><label>check2</label>
<input type="checkbox" class="example" id="check3"><label>check3</label>

<a class="check1" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

<a class="check1" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

<a class="check1" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>



    .hide {
      display: none;
    }



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

    <script>
      $('#check1').change(function() {
        if ($(this).is(":checked")) {
          $(".check1").addClass("hide");
        } else {
          $(".check1").removeClass("hide");
        }
      });
    </script>

Answer 1

在工作之前你需要做一些事情：

使其对所有复选框都通用。请改为绑定.example。
从点击的复选框中动态获取ID。
封装$(document).ready()函数内的所有内容。
将<input />和标签文字封装在<label>标记内！

我修改了HTML，使其看起来更好，更具语义性。

工作代码段

＆＃13;

$(function () {
  $('.example').change(function() {
    theID = this.id;
    if ($(this).is(":checked")) {
      $("." + theID).addClass("hide");
    } else {
      $("." + theID).removeClass("hide");
    }
  });

  // Check while loading.
  $(".example").each(function () {
    if ($(this).is(":checked"))
      $("." + this.id).addClass("hide");
  });
  
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div>
  <label><input type="checkbox" class="example" id="check1">check1</label>
  <label><input type="checkbox" class="example" id="check2" checked>check2</label>
  <label><input type="checkbox" class="example" id="check3">check3</label>
</div>

<div>
  <a class="check1" href="">check1</a>
  <a class="check2" href="">check2</a>
  <a class="check3" href="">check3</a>
</div>

<div>
  <a class="check1" href="">check1</a>
  <a class="check2" href="">check2</a>
  <a class="check3" href="">check3</a>
</div>

<div>
  <a class="check1" href="">check1</a>
  <a class="check2" href="">check2</a>
  <a class="check3" href="">check3</a>
</div>

＆＃13;

Answer 2

使用toggle（）

$('.example[type=checkbox]').change(function() {  
    $("."+this.id).toggle(!this.checked);
});

<强> DEMO

Answer 3

you can this jquery code :

$('input[type="checkbox"]').change(function () {
            var chkId = $(this).attr("id");
            if ($(this).is(":checked")) {
                $("." + chkId).addClass("hide");
            } else {
                $("." + chkId).removeClass("hide");
            }
        });

带隐藏的多功能复选框

3 个答案: