jquery---提交表單 radio 驗證
好吧 我知道這麼寫很2 不過忙於項目 湊合用吧 等有空再整理下 你們要不想費腦子本身寫 就直接拿去花 不過記得加載jquery喲
<!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>
下面是另外一個仁兄寫的 你們能夠參考對比下
<!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>
相關文章
- 1. jquery之ajax提交、js驗證表單
- 2. jquery表單驗證
- 3. 表單驗證（jquery）
- 4. 表單提交的驗證
- 5. Thinkphp5.1 表單提交、驗證
- 6. layui表單驗證提交
- 7. jsp表單提交前端驗證
- 8. jquery---------ajax+validate表單異步提交驗證
- 9. JQuery ajax提交表單及表單驗證
- 10. Ajax表單驗證失敗後，阻止表單提交（jQuery）
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章