最近写前端页面需要用到批量操作,这里使用checkbox、js主要用到attr()和prop(),这两个函数存在异同,为什么同时用两个下面详细说明。
首先说HTML,这里多选框是隐藏状态,点击批量操作显示所有checkbox。这个简单不多说,css自己调。
给全选id="all-collect":
<input type="checkbox" id="all-collect" value="false" />
下面所有选项给class="all-collect"
<input class="all-collect" type="checkbox" message_id="{{ record.id }}" value=""/>
js:通过value值来判断是要全选还是取消全选。
$("#all-collect").click(function () {
var that = $(this);
console.log( $("#all-collect").val());
if( that.val() == 'false'){
# 遍历所有选项,如果未被选中,将checked属性置为true
$('.all-collect').each(function(){
if($(this).attr('checked') != 'checked' ){
$(this).attr('checked', true);
$(this).prop('checked', true);
}
})
$("#all-collect").val('true');
}
else{
$('.all-collect').each(function(){
if($(this).attr('checked') == 'checked' ){
$(this).attr('checked', false);
$(this).prop('checked', false);
}
})
$("#all-collect").val('false');
}
});
$(".all-collect").click(function(){
#点击某个选项时,如果已被选中,将checked属性置为false;并检查全选是否被选中,然后移除checked属性,并将value改为false
if($(this).attr('checked')){
$(this).attr('checked', false);
$(this).prop('checked', false);
$("#all-collect").prop('checked', false);
$("#all-collect").val('false')
}
else {
#如果未被选中,将checked属性置为true;并遍历所有的checkbox,如果全被选中,将全选按钮选择框的checked属性置为true。
$(this).attr('checked', true);
var all_has_collected = true;
$('.all-collect').each(function(){
if($(this).attr('checked') != 'checked' ){
all_has_collected = false;
}
})
if(all_has_collected){
$("#all-collect").prop('checked', true);
$("#all-collect").val('true');
};
}
})
这里同时使用attr()和prop()并不多余,atrr()主要用来rewrite checked属性的值,prop()主要用来remove 页面效果。如果只用attr(),当全选和单独选择某些选项混用的时候,会发现某些选项的checked属性被修改但是页面没有效果并没有改变。
所以结合起来使,页面效果也很友善,好评。
根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr();