Javacript với thẻ radio, checkbox

Thứ ba, 25/11/2014 3:48 PM
 

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>&nbsp;</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:

 

Bài viết cùng chuyên mục: "Thiết kế html"

Liên hệ