layui中表单使用--复选框点击事件
layui中表单使用
1.页面 设计
需引入layui的css样式
***
js该如何写
$(function(){
var table_index = 0;
var tabIds=['lsryb','lsyx','lslb','lsyc','lsdz','dzbg','jsyj','qxdw'];
$('#tabs').pwstabs({
tabTitles:["历史软压板","历史遥信","历史录波","历史遥测","历史定值","动作报告","监视预警","缺陷定位"],
callback:function(current){
if(current==2){
$('#pYx').show();$('#pYc').hide();
}else if(current==4){
$('#pYx').hide();$('#pYc').show();
}else{
$('#pYx').hide();$('#pYc').hide();
}
currentPage = 1;
$("#lastPage").attr("disabled","disabled");
query(tabIds[current-1]);
table_index=current-1;
}
});
layui.use(['element','layer','form'],function(){
var form = layui.form;
form.on('checkbox(pYx)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
if(data.elem.checked){
$('#pYx .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
form.on('checkbox(pYc)', function(data){
if(data.elem.checked){
$('#pYc .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
});
layui.use('laydate', function(){
layui.laydate.render({
theme: 'molv',elem: '#pSt',type: 'date',value:'2010-01-01',isInitValue:true,btns:['now','confirm']
});
layui.laydate.render({
theme: 'molv',elem: '#pEt',type: 'date',value:new Date(),isInitValue:true,btns:['now','confirm']
});
});
//初始化
query(tabIds[0]);
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
$('#btnSearch').click(function(){
query(tabIds[table_index]);
});
//下一页按钮点击事件
$('#nextPage').click(function(){
currentPage += 1;
query(tabIds[table_index]);
if(currentPage != 1){
$("#lastPage").removeAttr("disabled");
}
});
//上一页按钮点击
$('#lastPage').click(function(){
currentPage -= 1;
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
query(tabIds[table_index]);
});
//首页按钮点击
$('#firstPage').click(function(){
currentPage = 1;
query(tabIds[table_index]);
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
});
//每页显示数目改变
$("#id_select").change(function(){
var count = $('#id_select option:selected') .val();
currentPage = 1;
pageSize = count;
query(tabIds[table_index]);
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
});
});
重点查看layui的写法部分
layui.use(['element','layer','form'],function(){
var form = layui.form;
form.on('checkbox(pYx)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
if(data.elem.checked){
$('#pYx .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
form.on('checkbox(pYc)', function(data){
if(data.elem.checked){
$('#pYc .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
});
layui.use('laydate', function(){
layui.laydate.render({
theme: 'molv',elem: '#pSt',type: 'date',value:'2010-01-01',isInitValue:true,btns:['now','confirm']
});
layui.laydate.render({
theme: 'molv',elem: '#pEt',type: 'date',value:new Date(),isInitValue:true,btns:['now','confirm']
});
});
注意点：
1.form.on()需要写在layui.user()中
2.form.on()中修改复选框的选中状态后，需要用form.render()更新页面渲染才能生效