Bằng cách sử dụng phát biểu return như trong trường hợp login để trả về giá trị true giá trị chọn là hợp lện ngược lại giá trị false dữ liệu chọn không hợp lệ
Ví dụ:
Thực hiện:
<html>
<head>
<title>Welcome to JavaScript</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<SCRIPT language=JavaScript>
function checkInput()
{
var isOK=false;
for(var i=0;i<document.frmReg.rdGender.length;i++)
{
if (frmReg.rdGender[i].checked==true)
{
isOK=true;
break;
}
}
if (isOK==false)
{
alert("Please enter choose your gender");
return false;
}
if (document.frmReg.chkBA.checked==false || document.frmReg.chkMBA.checked==false || document.frmReg.chkBS.checked==false || document.frmReg.chkMBS.checked==false)
{
alert("Please enter at least one certificate");
return false;
}
return true;
}
</script>
</head>
<body>
<div class=text_header>Registration form</div>
<br>
<table width="251">
<form name="frmReg" method="post" action="jsdoreg.php?goto=" onSubmit="return checkInput();">
<tr>
<td>Gender</td>
</tr>
<tr>
<td>
<input type="radio" name="rdGender" value="M">
Male
<input type="radio" name="rdGender" value="F">
Female </td>
</tr>
<tr>
<td>Marital Status</td>
</tr>
<tr>
<td>
<input type="radio" name="rdMar" value="S" checked>
Single
<input type="radio" name="rdMar" value="M">
Married</td>
</tr>
<tr>
<td>Graduate</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chkBA" value="BA">
BA
<input type="checkbox" name="chkBS" value="BS">
BS
<input type="checkbox" name="chkMBA" value="MBA">
MBA
<input type="checkbox" name="chkMBS" value="MBS">
MBS</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left" class="text_normal" valign="top"> <br>
<input type="submit" style="width=80px" name="Register" value="Register" class="button">
<input type="reset" name="Reset" value="Reset" class="button">
</td>
</tr>
</form>
</table>
</body>
- Đối với thẻ input dạng radio có tên rdMar, bạn không cần kiểm tra trạng thái của chúng, bở vì trong khai báo HTML đã có giá trị mặc định, điều này có nghĩa là nếu người dùng không chọn, thì họ sẽ có tình trạng gia đình mặc định là singe.
- Ngoài ra, trong các thẻ input dạng submit và button, bạn có thể sử dụng các khai báo HTML như class="button", đây là một phần tử trong trang .css
- Trong trường hợp bạn không chọn giớ tính sẽ xuất hiện thông báo:
- Tương tự như vậy khi người dùng không chọn bất kì một citificate cũng xuất hiện thông báo yêu cầu chọn citificate như hình:
Ví dụ:
Thực hiện:
<html>
<head>
<title>Welcome to JavaScript</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<SCRIPT language=JavaScript>
function checkInput()
{
var isOK=false;
for(var i=0;i<document.frmReg.rdGender.length;i++)
{
if (frmReg.rdGender[i].checked==true)
{
isOK=true;
break;
}
}
if (isOK==false)
{
alert("Please enter choose your gender");
return false;
}
if (document.frmReg.chkBA.checked==false || document.frmReg.chkMBA.checked==false || document.frmReg.chkBS.checked==false || document.frmReg.chkMBS.checked==false)
{
alert("Please enter at least one certificate");
return false;
}
return true;
}
</script>
</head>
<body>
<div class=text_header>Registration form</div>
<br>
<table width="251">
<form name="frmReg" method="post" action="jsdoreg.php?goto=" onSubmit="return checkInput();">
<tr>
<td>Gender</td>
</tr>
<tr>
<td>
<input type="radio" name="rdGender" value="M">
Male
<input type="radio" name="rdGender" value="F">
Female </td>
</tr>
<tr>
<td>Marital Status</td>
</tr>
<tr>
<td>
<input type="radio" name="rdMar" value="S" checked>
Single
<input type="radio" name="rdMar" value="M">
Married</td>
</tr>
<tr>
<td>Graduate</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chkBA" value="BA">
BA
<input type="checkbox" name="chkBS" value="BS">
BS
<input type="checkbox" name="chkMBA" value="MBA">
MBA
<input type="checkbox" name="chkMBS" value="MBS">
MBS</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left" class="text_normal" valign="top"> <br>
<input type="submit" style="width=80px" name="Register" value="Register" class="button">
<input type="reset" name="Reset" value="Reset" class="button">
</td>
</tr>
</form>
</table>
</body>
- Đối với thẻ input dạng radio có tên rdMar, bạn không cần kiểm tra trạng thái của chúng, bở vì trong khai báo HTML đã có giá trị mặc định, điều này có nghĩa là nếu người dùng không chọn, thì họ sẽ có tình trạng gia đình mặc định là singe.
- Ngoài ra, trong các thẻ input dạng submit và button, bạn có thể sử dụng các khai báo HTML như class="button", đây là một phần tử trong trang .css
- Trong trường hợp bạn không chọn giớ tính sẽ xuất hiện thông báo:
- Tương tự như vậy khi người dùng không chọn bất kì một citificate cũng xuất hiện thông báo yêu cầu chọn citificate như hình:
Nguồn : http://aweb.vn/xem-thiet-ke-web/50.javacript-voi-the-radio-checkbox.html
Tin mới hơn:
- Bộ sưu tập 200+ đoạn mã Javascript
- Sắp xếp lại các options trong drop list
- Transfer Options
- Thiết kế trang Web có tăng cường tính năng Java
- Tổng quan về javascript
Tin cũ hơn:
- Khai báo thẻ select dạng combo box
- Javacript với thẻ checkbox cùng tên
- Javacript với thẻ textarea
- Căn bản về javacript 2
- Căn bản về javacript 1
