好资源导航 » 文章资讯 » 基于JavaScript实现带数据验证和复选框的表单提交

基于JavaScript实现带数据验证和复选框的表单提交

2023-09-26 00:29:05 63

实现：

1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。

html





带数据验证和复选框的表单提交


table{
border-collapse:collapse;
}
td,th{
width:40px;
height:100px;
border:1pxsolid#000;
}
tabletbodytr:hover{
background-color:red;
}
tabletbodytr:not(:first-child):hover{background-color:#666;
}
tdinput[name='number']{
width:100px;
}







商品名
单价
购买数量





香蕉
100






苹果
100

js:


$(function(){
//全选
$("input[name='both']").click(function(){
var$isSelected=$(this).is(":checked");
for(vari=0;i<$("input[name='choice']").length;i++){
$("input[name='choice']")[i].checked=$isSelected;
}
})
});
//输入正确，且有选中该行复选框才提交
functioncheckShopping(){
$("#msg").html('');
var$checkbox=$("input[name='choice']");
varreg=/^[1-9]\d*$/;
var$number="";
varisInteger=false;//记录数字是否正确
varmoreOne=false;//选择复选框个数
$checkbox.each(function(){
if($(this).is(":checked")){
$number=$(this).parent().prev().children().val();
if(reg.test($number)){
isInteger=true;
moreOne=true;
}else{
$("#msg").html('提示：输入数量必须为正整数');
isInteger=false;
}
}
})
if(isInteger&&moreOne){
returntrue;
}elseif(!moreOne){
$("#msg").html('提示：至少选择一条信息');
returnfalse;
}else{
returnfalse;
}
}

总结

以上所述是小编给大家介绍的基于JavaScript实现带数据验证和复选框的表单提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

基于JavaScript实现带数据验证和复选框的表单提交

热门推荐

随机推荐