jquery---提交表单 radio 验证
好吧 我知道这么写很2 不过忙于项目 凑合用吧 等有空再整理下 大家要不想费脑子自己写 就直接拿去花 不过记得加载jquery哟
文件下载地址: http://down.51cto.com/data/254197
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >radion 验证 </title>
< script type ="text/javascript" src ='jquery-1.6.js' > </script>
< script type ="text/javascript" language ="javascript" >
function cc(){
for(var i = 1;i<7;i++){
var num = $(".r"+i).length;
var x = 0;
var bool = true;
for(var j=0;j<num;j++){
var aa = $(".r"+i+":eq("+j+"):checked").val();
if(aa == null){
x++
}
}
if(x == num){
alert("r"+i+"请选择");
bool = false;
break;
}
}
if(bool){
//alert("ok");
$("#test").submit();
}
}
</script>
< link href ="style.css" rel ="stylesheet" type ="text/css" />
</head>
< body >
< form name ="test" id ="test" action ="test.php" >
< input type ="radio" name ="sex" class ="r1" value ="男" />男
< input type ="radio" name ="sex" class ="r1" value ="女" />女
< br />
< input type ="radio" name ="list1" class ="r2" value ="十分满意" />十分满意
< input type ="radio" name ="list1" class ="r2" value ="满意" />满意
< input type ="radio" name ="list1" class ="r2" value ="不满意" />不满意
< input type ="radio" name ="list1" class ="r2" value ="非常差" />非常差
< br />
< input type ="radio" name ="list2" class ="r3" value ="十分满意" />十分满意
< input type ="radio" name ="list2" class ="r3" value ="满意" />满意
< input type ="radio" name ="list2" class ="r3" value ="不满意" />不满意
< input type ="radio" name ="list2" class ="r3" value ="非常差" />非常差
< br />
< input type ="radio" name ="list3" class ="r4" value ="十分满意" />十分满意
< input type ="radio" name ="list3" class ="r4" value ="满意" />满意
< input type ="radio" name ="list3" class ="r4" value ="不满意" />不满意
< input type ="radio" name ="list3" class ="r4" value ="非常差" />非常差
< br />
< input type ="radio" name ="list4" class ="r5" value ="十分满意" />十分满意
< input type ="radio" name ="list4" class ="r5" value ="满意" />满意
< input type ="radio" name ="list4" class ="r5" value ="不满意" />不满意
< input type ="radio" name ="list4" class ="r5" value ="非常差" />非常差
< br />
< input type ="radio" name ="list5" class ="r6" value ="十分满意" />十分满意
< input type ="radio" name ="list5" class ="r6" value ="满意" />满意
< input type ="radio" name ="list5" class ="r6" value ="不满意" />不满意
< input type ="radio" name ="list5" class ="r6" value ="非常差" />非常差
< br />
< input id ="sub " type ="button" name ="sub " value ="提交" onclick ="cc()" >
</form>
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title >radion 验证 </title>
< script type ="text/javascript" src ='jquery-1.6.js' > </script>
< script type ="text/javascript" language ="javascript" >
function cc(){
for(var i = 1;i<7;i++){
var num = $(".r"+i).length;
var x = 0;
var bool = true;
for(var j=0;j<num;j++){
var aa = $(".r"+i+":eq("+j+"):checked").val();
if(aa == null){
x++
}
}
if(x == num){
alert("r"+i+"请选择");
bool = false;
break;
}
}
if(bool){
//alert("ok");
$("#test").submit();
}
}
</script>
< link href ="style.css" rel ="stylesheet" type ="text/css" />
</head>
< body >
< form name ="test" id ="test" action ="test.php" >
< input type ="radio" name ="sex" class ="r1" value ="男" />男
< input type ="radio" name ="sex" class ="r1" value ="女" />女
< br />
< input type ="radio" name ="list1" class ="r2" value ="十分满意" />十分满意
< input type ="radio" name ="list1" class ="r2" value ="满意" />满意
< input type ="radio" name ="list1" class ="r2" value ="不满意" />不满意
< input type ="radio" name ="list1" class ="r2" value ="非常差" />非常差
< br />
< input type ="radio" name ="list2" class ="r3" value ="十分满意" />十分满意
< input type ="radio" name ="list2" class ="r3" value ="满意" />满意
< input type ="radio" name ="list2" class ="r3" value ="不满意" />不满意
< input type ="radio" name ="list2" class ="r3" value ="非常差" />非常差
< br />
< input type ="radio" name ="list3" class ="r4" value ="十分满意" />十分满意
< input type ="radio" name ="list3" class ="r4" value ="满意" />满意
< input type ="radio" name ="list3" class ="r4" value ="不满意" />不满意
< input type ="radio" name ="list3" class ="r4" value ="非常差" />非常差
< br />
< input type ="radio" name ="list4" class ="r5" value ="十分满意" />十分满意
< input type ="radio" name ="list4" class ="r5" value ="满意" />满意
< input type ="radio" name ="list4" class ="r5" value ="不满意" />不满意
< input type ="radio" name ="list4" class ="r5" value ="非常差" />非常差
< br />
< input type ="radio" name ="list5" class ="r6" value ="十分满意" />十分满意
< input type ="radio" name ="list5" class ="r6" value ="满意" />满意
< input type ="radio" name ="list5" class ="r6" value ="不满意" />不满意
< input type ="radio" name ="list5" class ="r6" value ="非常差" />非常差
< br />
< input id ="sub " type ="button" name ="sub " value ="提交" onclick ="cc()" >
</form>
</body>
</html>
下面是另一个仁兄写的 大家可以参考对比下
原文章地址: http://www.cnblogs.com/xcj1989/archive/2011/06/29/JQUERY_RADIO.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >JQuery radio </title>
< script type ="text/javascript" language ="javascript" src ="JavaScript/jquery-1.6.1.min.js" > </script>
< script type ="text/javascript" language ="javascript" >
/*------判断radio是否有选中，获取选中的值--------*/
$(function(){
$("#btnSubmit").click(function(){
var val=$('input:radio[name="sex"]:checked').val();
if(val==null){
alert("什么也没选中!");
return false;
}
else{
alert(val);
}
var list= $('input:radio[name="list"]:checked').val();
if(list==null){
alert("请选中一个!");
return false;
}
else{
alert(list);
}
});
});
</script>
</head>
< body >
< form id ="form1" >
< input type ="radio" name ="sex" value ="男" />男
< input type ="radio" name ="sex" value ="女" />女
< br />
< input type ="radio" name ="list" value ="十分满意" />十分满意
< input type ="radio" name ="list" value ="满意" />满意
< input type ="radio" name ="list" value ="不满意" />不满意
< input type ="radio" name ="list" value ="非常差" />非常差
< br />
< input type ="submit" value ="submit" id ="btnSubmit" />
</form>
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >JQuery radio </title>
< script type ="text/javascript" language ="javascript" src ="JavaScript/jquery-1.6.1.min.js" > </script>
< script type ="text/javascript" language ="javascript" >
/*------判断radio是否有选中，获取选中的值--------*/
$(function(){
$("#btnSubmit").click(function(){
var val=$('input:radio[name="sex"]:checked').val();
if(val==null){
alert("什么也没选中!");
return false;
}
else{
alert(val);
}
var list= $('input:radio[name="list"]:checked').val();
if(list==null){
alert("请选中一个!");
return false;
}
else{
alert(list);
}
});
});
</script>
</head>
< body >
< form id ="form1" >
< input type ="radio" name ="sex" value ="男" />男
< input type ="radio" name ="sex" value ="女" />女
< br />
< input type ="radio" name ="list" value ="十分满意" />十分满意
< input type ="radio" name ="list" value ="满意" />满意
< input type ="radio" name ="list" value ="不满意" />不满意
< input type ="radio" name ="list" value ="非常差" />非常差
< br />
< input type ="submit" value ="submit" id ="btnSubmit" />
</form>
</body>
</html>