我希望在.select-all
为checked
时将.active
类添加到.select-input
的每个label
中,然后在unchecked
或其中一个.select-input
为unchecked
时删除它。
为什么在第一个函数中添加.prop("checked", true)
不会在第二个函数中触发$("input[name='check']:checkbox").change(function()
?
$(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");
}
});
.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;
}
<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>
发布于 2018-05-28 10:44:58
您需要在更改属性后使用.change()
:
$(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");
}
});
.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;
}
<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>
https://stackoverflow.com/questions/50558442
复制相似问题