Question

如果选择了label的{{1}}，如何让.select-label label触发它的css动画？

我希望第二个标签对输入的更改做出反应并为.pick-select {{运行相同的动画，而不是只有一个label受到input更改的影响。 1}}和.pick-select label一样。

.select-label

label

$(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='select-check']:checkbox").change(function() {
    if ($(this).is(":checked")) {
      if ($("input[name='select-check']:checkbox:not(:checked)").length == 0) {
        $(".select-all").prop("checked", true);
      }
      $(this)
        .closest(".shrink")
        .addClass("active");
    } else {
      $(".select-all").prop("checked", false);
      $(this)
        .closest(".shrink")
        .removeClass("active");
    }
  });
});

Answer 1

在我的方法中，当checkbox.select-input为checked时，最近的.selectall-btn会被激活（active添加到其class）。请参阅CSS中的.selectall-btn.active label > span。

＆＃13;

$(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='select-check']:checkbox").change(function() {
    if ($(this).is(":checked")) {
      // This didn't work; hence I added `:not(.select-all)` to the selector. The
      // `.is()` check should be kept there.
      if (! $(this).is('.select-all') &&
        $("input[name='select-check']:checkbox:not(:checked):not(.select-all)").length == 0) {
        $(".select-all").prop("checked", true);
      }
      $(this)
        .closest(".shrink")
        .addClass("active")
        // This does what you wanted. (see the CSS code)
        .prev('.selectall-btn').addClass('active');
    } else {
      if (! $(this).is('.select-all')) {
        $(".select-all").prop("checked", false);
      }
      $(this)
        .closest(".shrink")
        .removeClass("active")
        // This does what you wanted. (see the CSS code)
        .prev('.selectall-btn').removeClass('active');
    }
  });
});

＆＃13;

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.shrink {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
  -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);
}
.shrink.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;
}
.select-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.select-label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid silver;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 150ms,
    transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
input[name="select-check"] {
  display: none;
}
input[name="select-check"]:checked + label span,
.selectall-btn.active label > span {
  background-color: blue;
  border-color: blue;
  transform: scale(1.25);
}
input[name="select-check"]:checked + label span:after,
.selectall-btn.active label > span:after {
  width: 10px;
  background: #fff;
  transition: width 150ms ease 100ms;
}
input[name="select-check"]:checked + label span:before,
.selectall-btn.active label > span:before {
  width: 5px;
  background: #fff;
  transition: width 150ms ease 100ms;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectall-btn">
  <input type="checkbox" id="selectall" class="select-all" name="select-check" />
  <label class="select-label" for="selectall"><span></span>Select All
</label>
</div>
<div class="post-list">
  <div class="item">
    <div class="selectall-btn">
      <label class="select-label" for="post-select1"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label class="pick-select hidden">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
      </div>
    </div>
  </div>
  <div class="item">
    <div class="selectall-btn">
      <label class="select-label" for="post-select2"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label class="pick-select hidden">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我为下面的复选框定义了一个监听器。选中复选框后，它会对span进行所需的更改，否则会将其删除。

$("input[type='checkbox']").on('change', function() {
  if ($(this).prop('checked')) {
    var span = $("label[for='" + $(this).attr('id') + "']").children("span");
    span.css({
      "background-color": "blue",
      "border-color": "blue",
      "transform": "scale(1.25)"
    });
  } else {
    var span = $("label[for='" + $(this).attr('id') + "']").children("span");
    span.css({
      "background-color": "",
      "border-color": "",
      "transform": ""
    });
  }

})

我希望它可以帮到你

＆＃13;

$(".select-all").on("click", function() {
  $(this).is(":checked") ?
    $(".select-input")
    .prop("checked", true)
    .change() :
    $(".select-input")
    .prop("checked", false)
    .change();
});
$("input[name='select-check']:checkbox").change(function() {
  if ($(this).is(":checked")) {
    if ($("input[name='select-check']:checkbox:not(:checked)").length == 0) {
      $(".select-all").prop("checked", true);
    }
    $(this)
      .closest(".shrink")
      .addClass("active");
  } else {
    $(".select-all").prop("checked", false);
    $(this)
      .closest(".shrink")
      .removeClass("active");
  }
});

$("input[type='checkbox']").on('change', function() {
  if ($(this).prop('checked')) {
    var span = $("label[for='" + $(this).attr('id') + "']").children("span");
    span.css({
      "background-color": "blue",
      "border-color": "blue",
      "transform": "scale(1.25)"
    });
  } else {
    var span = $("label[for='" + $(this).attr('id') + "']").children("span");
    span.css({
      "background-color": "",
      "border-color": "",
      "transform": ""
    });
  }

})

＆＃13;

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.shrink {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
  -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);
}

.shrink.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;
}

.select-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.select-label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid silver;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 150ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

input[name="select-check"] {
  display: none;
}

input[name="select-check"]:checked+label span {
  background-color: blue;
  border-color: blue;
  transform: scale(1.25);
}

input[name="select-check"]:checked+label span:after {
  width: 10px;
  background: #fff;
  transition: width 150ms ease 100ms;
}

input[name="select-check"]:checked+label span:before {
  width: 5px;
  background: #fff;
  transition: width 150ms ease 100ms;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectall-btn">
  <input type="checkbox" id="selectall" class="select-all" name="select-check" />
  <label class="select-label" for="selectall"><span></span>Select All
</label>
</div>
<div class="post-list">
  <div class="item">
    <div class="selectall-btn">
      <label class="select-label" for="post-select1"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label class="pick-select hidden">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
      </div>
    </div>
  </div>
  <div class="item">
    <div class="selectall-btn">
      <label class="select-label" for="post-select2"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label class="pick-select hidden">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

你的问题很长很不清楚，这就是我的理解：

您想要为每label

选择每秒.pick-select来显示动画

因此，您可以采取以下措施来实现这一目标：

var listOfPickSelect = $("div input[type=checkbox]");
listOfPickSelect.each(function(i){
  if(i%2==0 && $(this).prev("label").hasClass("pick-select")){
    /*Fire your animations*/
  }
});

一个输入的多个标签上的复选框动画

3 个答案: