jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
jQuery实现按钮的点击全选/反选单选框/复选框文本框表单验证
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"src="jquery-1.4.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
//按钮
$("#but").click(function(){
alert("ThisismyJSPpage");
});
//文本框
$("#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(){
varstr="";//定义一个数组
$('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);
returnfalse;
}elseif($("#age").val()==""){
$("#ageid").show();
$("#ageid").fadeOut(3000);
returnfalse;
}
alert($("#sel").val());
alert("姓名："+$("#name").val()+""+"年龄"+$("#age").val());
});
});
</script>
</head>
<body>
<!--按钮-->
<inputtype="button"value="确认"id="but"/><br>
<!--文本框-->
<inputtype="text"name="text"id="te"/><inputtype="button"id="btext"value="取值"><br>
<!--下拉框-->
<selectid="sel">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3">3</option>
</select>
<br>
<!--单选框-->
<inputtype="radio"name="radiobutton"id="uradio1"value="1">1
<inputtype="radio"name="radiobutton"id="uradio2"value="2">2
<inputtype="radio"name="radiobutton"id="uradio3"value="3">3
<br>
<!--复选框-->
<inputtype="checkbox"name="checkbox"value="1">1
<inputtype="checkbox"name="checkbox"value="2">2
<inputtype="checkbox"name="checkbox"value="3">3
<inputtype="checkbox"name="checkbox"value="4">4
<inputtype="button"id="ucheck"value="确定">
<br>
<!--复选框的全选和反选-->
<inputtype="checkbox"name="checkItems"id="checkItems"value="全选/全不选"/>全选/全不选
<br>
<inputtype="checkbox"name="items"value="足球"/>足球
<inputtype="checkbox"name="items"value="篮球"/>篮球
<inputtype="checkbox"name="items"value="游泳"/>游泳
<inputtype="checkbox"name="items"value="唱歌"/>唱歌
<br>
<inputtype="button"name="checkall"id="checkall"value="全选"/>
<inputtype="button"name="checkall"id="checkallNo"value="全不选"/>
<inputtype="button"name="checkall"id="check_revsern"value="反选"/>
<!--表单验证-->
<formaction="">
姓名：<inputtype="text"id="name"><spanid="nameid"style="color:#f00;">姓名不能为空！</span><br>
年龄：<inputtype="text"id="age"/><spanid="ageid"style="color:#f00;">年龄不能为空！</span><br>
<inputtype="button"id="ubu"value="确定"/>
</form>
</body>
</html>
菜鸟第一次发布，如有不对还望指出
以上所述就是本文的全部内容了，希望大家能够喜欢。