javascript - 想要获取复选框的值并将其值分配给类名
问题描述
在 div 中,我有一个“全选”复选框。当检查此复选框时,所有其他复选框将自动检查。我想将它们的值分配为类名。检查单个复选框时,我可以实现这一目标。但是现在我希望在选中全选复选框时同时选中所有复选框时这应该起作用。</p>
$('.select-all').on('click', function() {
let isSelected = $(this).is(':checked');
$(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
if (isSelected) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
})
});
$('input:checkbox').not('.select-all').change(function() {
var cl = $(this).val();
var cls = 'abc' + '' + cl + '';
if ($(this).is(':checked')) {
$(this).addClass(cls);
} else {
$(this).removeClass(cls);
}
})
<div class="checkbox-list">
<label><input type="checkbox" class="select-all" name="">All</label>
<label><input type="checkbox" name="" value="1">One</label>
<label><input type="checkbox" name="" value="2">Two</label>
<label><input type="checkbox" name="" value="3">Three</label>
<label><input type="checkbox" name="" value="4">Four</label>
<label><input type="checkbox" name="" value="5">Five</label>
<label><input type="checkbox" name="" value="6">Six</label>
<label><input type="checkbox" name="" value="6">Three</label>
<label><input type="checkbox" name="" value="7">Four</label>
<label><input type="checkbox" name="" value="8">Five</label>
<label><input type="checkbox" name="" value="9">Six</label>
</div>
解决方案
您几乎已经编写了代码来实现这一点,我在这里所做的是在每个循环中添加cl = $(this).val();
and 并在为 true 时添加类,并在 false 时删除。cls = 'abc' + '' + cl + '';
isSelected
$('.select-all').on('click', function() {
let isSelected = $(this).is(':checked');
$(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
let cl = $(this).val();
let cls = 'abc' + '' + cl + '';
if (isSelected) {
$(this).prop('checked', true);
$(this).addClass(cls);
} else {
$(this).prop('checked', false);
$(this).removeClass(cls);
}
})
});
$('input:checkbox').not('.select-all').change(function() {
let cl = $(this).val();
let cls = 'abc' + '' + cl + '';
if ($(this).is(':checked')) {
$(this).addClass(cls);
} else {
$(this).removeClass(cls);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-list">
<label><input type="checkbox" class="select-all" name="">All</label>
<label><input type="checkbox" name="" value="1">One</label>
<label><input type="checkbox" name="" value="2">Two</label>
<label><input type="checkbox" name="" value="3">Three</label>
<label><input type="checkbox" name="" value="4">Four</label>
<label><input type="checkbox" name="" value="5">Five</label>
<label><input type="checkbox" name="" value="6">Six</label>
<label><input type="checkbox" name="" value="6">Three</label>
<label><input type="checkbox" name="" value="7">Four</label>
<label><input type="checkbox" name="" value="8">Five</label>
<label><input type="checkbox" name="" value="9">Six</label>
</div>
推荐阅读
- javascript - 如何在javascript中本地保存树视图节点
- javascript - 尝试通过使用javascript单击图像来设置图像的不透明度,但不断出现错误
- angular - 谷歌地图地方请求只返回一个地方
- amazon-web-services - 使用 cloudFormation 将角色附加到现有 EC2 实例
- angular - 从对象数组的 ng-For 循环内动态地将纬度和经度传递给角度谷歌地图
- python - 如果 x,y 在坐标框内
- magento - 使用 XAMPP 安装 Magento 2.3 时出错。无法打开本地主机/演示网站
- javascript - 如何使用 getJSON 读取和显示 json 二维数组?
- c# - 无法将类型“UnityEngine.ScriptableObject”隐式转换为“T”
- wordpress - Gutenberg Block RichText 元素在编辑器中双重显示