首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用select all将类添加到选中的复选框

使用select all将类添加到选中的复选框
EN

Stack Overflow用户
提问于 2018-05-28 10:40:13
回答 1查看 38关注 0票数 0

我希望在.select-allchecked时将.active类添加到.select-input的每个label中,然后在unchecked或其中一个.select-inputunchecked时删除它。

为什么在第一个函数中添加.prop("checked", true)不会在第二个函数中触发$("input[name='check']:checkbox").change(function()

代码语言:javascript
复制
$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input").prop("checked", true) :
      $(".select-input").prop("checked", false);
  });
});
$("input[name='check']:checkbox").change(function() {
  if ($(this).is(":checked")) {
    $(this)
      .parent("label")
      .addClass("active");
  } else {
    $(this)
      .parent("label")
      .removeClass("active");
  }
});
代码语言:javascript
复制
.item {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
}

.pick-select {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.pick-select.active {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  border: 2px solid red;
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectall">
<input type="checkbox" id="selectall" class="select-all"/> Select All
</label>
<div class="post-list">
  <div class="item">
    <div>
      <label class="pick-select" for="1"><input id="1" type="checkbox" class="select-input" name="check"></label> 1
    </div>
  </div>
  <div class="item">
    <div>
      <label class="pick-select" for="2"><input id="2" type="checkbox" class="select-input" name="check"></label> 2
    </div>
  </div>
</div>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-28 10:44:58

您需要在更改属性后使用.change()

代码语言:javascript
复制
$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input").prop("checked", true).change() :
      $(".select-input").prop("checked", false).change();
  });
});
$("input[name='check']:checkbox").change(function() {
  if ($(this).is(":checked")) {
    if($("input[name='check']:checkbox:not(:checked)").length==0){
         $(".select-all").prop("checked", true);
    }
    $(this)
      .parent("label")
      .addClass("active");
      
  } else {
    $(".select-all").prop("checked", false)
    $(this)
      .parent("label")
      .removeClass("active");
  }
});
代码语言:javascript
复制
.item {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
}

.pick-select {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.pick-select.active {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  border: 2px solid red;
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectall">
<input type="checkbox" id="selectall" class="select-all"/> Select All
</label>
<div class="post-list">
  <div class="item">
    <div>
      <label class="pick-select" for="1"><input id="1" type="checkbox" class="select-input" name="check"></label> 1
    </div>
  </div>
  <div class="item">
    <div>
      <label class="pick-select" for="2"><input id="2" type="checkbox" class="select-input" name="check"></label> 2
    </div>
  </div>
</div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50558442

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档