gpt4 book ai didi

javascript - 使用全选将类添加到选中的复选框

转载 作者:行者123 更新时间:2023-12-01 02:01:14 25 4
gpt4 key购买 nike

我希望在 .select-all< 时将 .active 类添加到 .select-input 的每个 label选中,然后在未选中.select-input 之一未选中 时将其删除。

为什么不在第一个触发 $("input[name='check']:checkbox").change 的函数中添加 .prop("checked", true) (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>

最佳答案

更改属性后需要使用.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>

关于javascript - 使用全选将类添加到选中的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50558442/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com