Trong một vài tình huống khi bạn đưa ra lựa chọn cho người dùng check box, người dùng có thể có mong muốn check hết tất cả, hoặc khi họ lỡ check nhiều quá họ muốn bỏ check để check lại, nêu option chọn ít thì không có vấn đề gì lớn, nhưng nếu nhiều thì có tạo cảm giác khó khăn cho người dùng và họ không muốn điền tiếp vì vậy ta thường thêm chức năng là check chọn hết hoặc bỏ chọn hết các field checkbox để người dùng có thể thao tác nhanh hơn.
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Source:
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Source:
<html>
<head>
<script language="JavaScript">
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;
}
checkflag = "true";
return "Uncheck All";
} else {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
checkflag = "false";
return "Check All";
}
}
// End -->
</script>
</head>
<!-- CONTINUE -->
<body>
<center>
<form name="myform" action="" method="post">
<table>
<tbody>
<tr>
<td>
<b>Your Favorite Scripts & Languages</b><br>
<input name="list" value="1" type="checkbox">Java<br>
<input name="list" value="2" type="checkbox">JavaScript<br>
<input name="list" value="3" type="checkbox">ASP<br>
<input name="list" value="4" type="checkbox">HTML<br>
<input name="list" value="5" type="checkbox">SQL<br>
<br>
<input value="Check All" onclick="this.value=check(this.form.list)" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</center>
<br>
</body>
</html>
<head>
<script language="JavaScript">
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;
}
checkflag = "true";
return "Uncheck All";
} else {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
checkflag = "false";
return "Check All";
}
}
// End -->
</script>
</head>
<!-- CONTINUE -->
<body>
<center>
<form name="myform" action="" method="post">
<table>
<tbody>
<tr>
<td>
<b>Your Favorite Scripts & Languages</b><br>
<input name="list" value="1" type="checkbox">Java<br>
<input name="list" value="2" type="checkbox">JavaScript<br>
<input name="list" value="3" type="checkbox">ASP<br>
<input name="list" value="4" type="checkbox">HTML<br>
<input name="list" value="5" type="checkbox">SQL<br>
<br>
<input value="Check All" onclick="this.value=check(this.form.list)" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</center>
<br>
</body>
</html>
No comments:
Post a Comment