我尝试使用复选框选择所有内容,但无法实现它。
<div class="checkbox" id="myCheckbox2">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">2</span>
</label>
</div>
<div class="checkbox" id="myCheckbox3">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">all</span>
</label>
</div>
<小时/>
$(document).ready(function() {
$('#myCheckbox').click(function(event) {
if ($("#myCheckbox").checkbox('isChecked')) {
$('.checkbox').each(function() { //loop through each checkbox
$('.checkbox').checkbox('check');
});
} else {
$('.checkbox').each(function() {
$('.checkbox').checkbox('uncheck');
});
}
});
});
我使用的是fuelux 3.13、jquery 1.12、bootstarp js 3.13
最佳答案
我也遇到了同样的问题。
- 您不需要
each
因为 class selector ($()
) 查找共享您指定的类或 ID 的每个元素。 - FuelUX 的属性
checkbox
应该在标签
上使用,而不是在输入
上使用。 - 如果您想使用 FuelUX 函数,您应该使用
checkbox('check')
而不是prop()
(即 JQuery)。鉴于我是网络开发新手,我想说两者是一样的。
JavaScript
$(document).ready(function() {
$('.checkbox.slc-all input').on('change', function() {
if ($(this).is(':checked')){
$('.checkbox.slc-chk label').checkbox('check');
}
else {
$('.checkbox.slc-chk label').checkbox('uncheck');
}
});
});
HTML
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="checkbox slc-all">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Select All</span>
</label>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="checkbox slc-chk">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="O1">
<span class="checkbox-label">O1</span>
</label>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="checkbox slc-chk">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="O1">
<span class="checkbox-label">O1</span>
</label>
</div>
</div>
这对我有用。希望它也对您有用。
这里是例子fiddle
关于javascript - Fuel ux 复选框全选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35501022/