jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

2020-05-23 06:09:30易采站长站整理

jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//按钮
$("#but").click(function(){
alert("This is my JSP page");
});

//文本框
$("#btext").click(function(){
alert($("#te").val());
});

//下拉框
$("#sel").change(function(){
alert($("#sel").val());
});

//单选框
$("#uradio1").click(function(){
alert($('input[name="radiobuttid=on"]:checked').val());
});
$("#uradio2").click(function(){
alert($('input[name="radiobutton"]:checked').val());
});
$("#uradio3").click(function(){
alert($('input[name="radiobutton"]:checked').val());
});

//复选框
$("#ucheck").click(function(){
var str="";//定义一个数组
$('input[name="checkbox"]:checked').each(function(){//遍历每一个名字为interest的复选框,其中选中的执行函数
str+=$(this).val();//将选中的值添加到数组chk_value中

});
alert(str);
});
//全选
$("#checkall").click(function(){
$("input[name='items']").attr("checked",true);
});

//全不选
$("#checkallNo").click(function(){
$("input[name='items']").attr("checked",false);
});

//反选
$("#check_revsern").click(function(){
$("input[name='items']").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
});
});

//全选/反选
$("#checkItems").click(function(){
$("input[name='items']").attr("checked",$(this).get(0).checked);
});

//表单验证
$("#nameid").hide();
$("#ageid").hide();

$("#ubu").click(function(){
if($("#name").val()==""){
$("#nameid").show();
$("#nameid").fadeOut(3000);
return false;
}else if($("#age").val()==""){
$("#ageid").show();
$("#ageid").fadeOut(3000);
return false;