jQuery implements the button click On All and Anti menu check box and check box text box form validation
- 2020-06-19 09:48:27
- OfStack
jQuery implements button click on all/Reverse checkbox/check box text box form validation
<!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(){
// button
$("#but").click(function(){
alert("This is my JSP page");
});
// The text box
$("#btext").click(function(){
alert($("#te").val());
});
// A drop-down box
$("#sel").change(function(){
alert($("#sel").val());
});
// Radio buttons
$("#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());
});
// Check box
$("#ucheck").click(function(){
var str="";// define 1 An array
$('input[name="checkbox"]:checked').each(function(){// Traverse every 1 A name for interest The check box for the selected execution function
str+=$(this).val();// Adds the selected value to the array chk_value In the
});
alert(str);
});
// Future generations
$("#checkall").click(function(){
$("input[name='items']").attr("checked",true);
});
// All don't choose
$("#checkallNo").click(function(){
$("input[name='items']").attr("checked",false);
});
// The selected
$("#check_revsern").click(function(){
$("input[name='items']").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
});
});
// Future generations / The selected
$("#checkItems").click(function(){
$("input[name='items']").attr("checked",$(this).get(0).checked);
});
// Form validation
$("#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;
}
alert($("#sel").val());
alert(" Name: "+$("#name").val()+" "+" age "+$("#age").val() );
});
});
</script>
</head>
<body>
<!-- button -->
<input type="button" value=" confirm " id="but"/><br>
<!-- The text box -->
<input type="text" name="text" id="te" /><input type="button" id="btext" value=" The values "><br>
<!-- A drop-down box -->
<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<!-- Radio buttons -->
<input type="radio" name="radiobutton" id="uradio1" value="1"> 1
<input type="radio" name="radiobutton" id="uradio2" value="2"> 2
<input type="radio" name="radiobutton" id="uradio3" value="3"> 3
<br>
<!-- Check box -->
<input type="checkbox" name="checkbox" value="1"> 1
<input type="checkbox" name="checkbox" value="2"> 2
<input type="checkbox" name="checkbox" value="3"> 3
<input type="checkbox" name="checkbox" value="4"> 4
<input type="button" id="ucheck" value=" determine ">
<br>
<!-- Select all and unselect the check box -->
<input type="checkbox" name="checkItems" id="checkItems" value=" Future generations / All don't choose "/> Future generations / All don't choose
<br>
<input type="checkbox" name="items" value=" football "/> football
<input type="checkbox" name="items" value=" basketball "/> basketball
<input type="checkbox" name="items" value=" swimming "/> swimming
<input type="checkbox" name="items" value=" Sing a song "/> Sing a song
<br>
<input type="button" name="checkall" id="checkall" value=" Future generations " />
<input type="button" name="checkall" id="checkallNo" value=" All don't choose " />
<input type="button" name="checkall" id="check_revsern" value=" The selected " />
<!-- Form validation -->
<form action="">
Name: <input type="text" id="name"><span id="nameid" style="color:#f00;"> Name must not be empty! </span><br>
Age: <input type="text" id="age"/><span id="ageid" style="color:#f00;"> Age cannot be empty! </span> <br>
<input type="button" id="ubu" value=" determine " />
</form>
</body>
</html>
Rookie the first release, if there is wrong also hope to point out
This is the end of this article, I hope you enjoy it.