Sử dụng js xử lý checkbox

Các phần tử của đối tượng Form

Form được tạo bởi các phần tử cho phép người sử dụng đưa thông tin vào. Khi đó, nội dung [hoặc giá trị] của các phần tử sẽ được chuyển đến một chương trình trên server qua một giao diện được gọi là Common Gateway Interface[Giao tiếp qua một cổng chung] gọi tắt là CGI

Sử dụng JavaScript bạn có thể viết những đoạn scripts chèn vào HTML của bạn để làm việc với các phần tử của form và các giá trị của chúng.

Các phần tử của form

Phần tử	Mô tả
button	Là một nút bấm hơn là nút submit hay nút reset[]
checkbox	Một checkbox []
FileUpload	Là một phần tử tải file lên cho phép người sử dụng gửi lên một file []
hidden	Một trường ẩn []
password	Một trường text để nhập mật khẩu mà tất cả các ký tự nhập vào đều hiển thị là dấu [*][]
radio	Một nút bấm []
reset	Một nút reset[]
select	Một danh sách lựa chọn[option1option2]
submit	Một nút submit []
text	Một trường text []
textArea	Một trường text cho phép nhập vàp nhiều dòngdefault text]

Mỗi phần tử có thể được đặt tên để JavaScript truy nhập đến chúng qua tên

THUỘC TÍNH TYPE

Trong mỗi phần tử của form đều có thuộc tính type, đó là một xâu chỉ định rõ kiểu của phần tử được đưa vào như nút bấm, một trường text hay một checkbox...

Xâu đó có thể là một trong các giá trị sau:

Text field: "text"

Radio button: "radio"

Checkbox: "checkbox"

Hidden field: "hidden"

Submit button: "submit"

Reset button: "reset"

Password field: "password"

Button: "button"

Select list: "select-one"

Multiple select lists: "select-multiple"

Textarea field: "textarea"

PHẦN TỬ BUTTON

Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn là submit và reset bởi vị dữ liệu trong form phải được gửi tới một vài địa chỉ URL [thường là CGI-BIN script] để xử lý và lưu trữ.

Một phần tử button được chỉ định rõ khi sử dụng thẻ INPUT:

Trong thẻ INPUT, name là tên của button, thuộc tính VALUE có chứa nhãn của button sẽ được hiển thị trên Navigator của browser.

Chỉ có một thẻ sự kiện duy nhất đối với button là onClick. Kết hợp với nó là cách thức duy nhất click.Phần tử buttton có khả năng mở rộng cho phép người lập trình JavaScript có thể viết được một đoạn mã lệnh JavaScript để thực thi việc thêm vào một nút bấm trong một script.

Trong ví dụ sau, thay vì sử dụng onChange, bạn có thể chỉnh sửa script để định giá biểu thức khi button được bấm.

Định giá một form sử dụng phần tử button.

button Example






Enter a JavaScript mathematical expression:
 


The result of this expression is:
 





 

PHẦN TỬ CHECKBOX

Các phần tử checkbox có khả năng bật tắt dùng để chọn hoặc không chọn một thông tin. Các checkbox có nhiều thuộc tính và cách thức hơn button. Bảng dưới đây là danh sách các thuộc tính và các cách thức của phần tử checkbox.

Các thuộc tính và cách thức của phần tử checkbox.

Cách thức và thuộc tính	Mô tả
checked	Cho biết trạng thái hiện thời của checkbox [thuộc tính]
defaultChecked	Cho biết trạng thái mặc định của phần tử [thuộc tính]
name	Cho biết tên của phần tử được chỉ định trong thẻ INPUT [thuộc tính]
value	Cho biết giá trị hiện thời của phần tử được chỉ định trong thẻ INPUT [thuộc tính]
click[]	Mô tả một click vào checkbox [Cách thức]

Phần tử checkbox chỉ có một thẻ sự kiện là onClick

Tạo hộp checkbox để nhập vào một số rồi lựa chọn tính nhân đôi và bình phương:

checkbox Example






Value:  


Action [default double]:  
Square


Result:  


 

Trong script này, bạn đã thấy cách sử dụng thẻ sự kiện onClick cũng như thuộc tính checked là một giá trị kiểu Boolean có thể dùng làm điều kiện trong câu lệnh if...else

Bạn có thể thêm một checkbox tên là square vào form. Nếu hộp này được check, chương trình sẽ lấy giá trị của nó, nếu không, một thực thi được mặc định sẽ nhân đôi giá trị của nó. Thẻ sự kiện onClick trong checkbox được định nghĩa:

[ ]

Khi đó nếu người dùng thay đổi một câu lệnh khác, form sẽ được tính toán lại.

Để tạo ra sự mở rộng cho checkbox. bạn có thể thay đổi hàm calculate[] như sau:

function calculate[form,callingField] {
    if [callingField == "result"] {// if [1]
    if [form.square.checked] {// if [2]
    form.entry.value = Math.sqrt[form.result.value]; 
    }
    else {
    form.entry.value = form.result.value / 2;
    }//end if[2]
    }
    else {
    if [form.square.checked] {// if [3]
    form.result.value=form.entry.value*form.entry.value;
    }
    else {
    form.result.value = form.entry.value * 2;
    }// end if [3]
    }// end if [1]
    }
    

PHẦN TỬ FILE UPLOAD

Phần tử này cung cấp cho form một cách để người sử dụng có thể chỉ rõ một file đưa vào form xử lý. Phần tử file Upload được chỉ định rõ trong JavaScript bằng đối tượng FileUpload.

Đối tượng chỉ có hai thuộc tính là name và value, cả hai đều là giá trị xâu như các đối tượng khác. Không có cách thức hay thẻ file cho đối tượng này.

PHẦN TỬ HIDDEN

Phần tử hidden là phần tử duy nhất trong số tất cả các phần tử của form không được hiển thị trên Web browser. Trường hidden có thể sử dụng để lưu các giá trị cần thiết để gửi tới server song song với sự xuất ra từ form [form submission] nhưng nó không được hiển thị trên trang. Mọi người có thể sử dụng trong JavaScript để lưu các giá trị trong suốt một script và để tính toán không cần form.

Đối tượng hidden chỉ có hai thuộc tính là name và value, đó cũng là những giá trị xâu giống các đối tượng khác. Không có cách thức hay thẻ sự kiện nào cho đối tượng này.

PHẦN TỬ PASSWORD

Đối tượng Password là đối tượng duy nhất trong các đối tượng của form mà khi gõ bất kỳ ký tự nào vào cũng đều hiển thị dấu sao[*]. Nó cho phép đưa vào những thông tin bí mật như đăng ký mật khẩu...

Đối tượng Password có 3 thuộc tính giống trường text là: defaultValue, name và value. Không giống với hai phần tử ở trên, trường Password có nhiều cách thức hơn[focus[], blur[], and select[] ] và tương ứng với các thẻ sự kiện: onFocus, onBlur, and onSelect.

Phần này sẽ được nói kỹ hơn trong đối tượng text.

PHẦN TỬ RADIO

Đối tượng radio gần giống sự bật tắt checkbox khi có hai nút radio kết hợp thành một nhóm. Khi nhiều radio được kết hợp thành một nhóm, chỉ có một nút được chọn trong bất kỳ một thời điểm nào. Ví dụ dòng lệnh sau tạo ra một nhóm radio có ba nút tên là test:

1

    2
 
    3

    

Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT.

Có một vài thuộc tính để kiểm tra trạng thái hiện thời của một nhóm nút radio. Bảng sau hiển thị các thuộc tính và cách thức của đối tượng radio.

Các thuộc tính và cách thức của đối tượng radio.

Thuộc tính và cách thức	Mô tả
checked	Mô tả trạng thái hiện thời của phần tử radio [thuộc tính]
defaultChecked	Mô tả trạng thái mặc định của phần tử [thuộc tính]
index	Mô tả thứ tự của nút radio được chọn hiện thời trong một nhóm
length	Mô tả tổng số nút radio trong một nhóm
name	Mô tả tên của phần tử được chỉ định trong thẻ INPUT [thuộc tính]
value	Mô tả giá trị hiện thời của phần tử được định ra trong thẻ INPUT [thuộc tính]
click[]	Mô phỏng một click trên nút radio [cách thức]

Cũng như checkbox, radio chỉ có một thẻ sự kiện là onClick.

Không có bất kỳ một đối tượng form nào có thuộc tính index và length. Do một nhóm radio gồm nhiều phần tử radio, nên chúng được đặt trong một mảng các nút radio và được đánh số từ 0. Trong ví dụ nhóm radio có tên test ở trên, nếu nhóm đó nằm trong một form có tên là "testform", bạn có thể gọi tới nút radio thứ hai bằng tên "testform.test[1]" và có thể kiểm tra giá trị của nó bằng "testform.test[1].checked"

Để minh hoạ rõ cách dùng đối tượng radio, ta xem ví dụ sau:

radio button Example






Value:  

Action:

 Double

 Square 

Result:  

Trong ví dụ này, sự thay đổi từ checkbox ở trên là rất khó nhận biết. Thay cho một checkbox trong ví dụ trước, ở đây ta sử dụng hai nút radio với hai giá trị khác nhau: double và square

Như ta đã biết có thể truy nhập đến các nút radio qua một mảng, do đó hai nút này có thể truy nhập bằng action[0] và action[1]. Bằng cách này, bạn chỉ cần thay đổi tham chiếu đến hàm calculate[] từ form.square.checked thành form.action[1].checked.

PHẦN TỬ RESET

Sử dụng đối tượng reset, bạn có thể tác động ngược lại để click vào nút Reset. Cũng giống đối tượng button, đối tượng reset có hai thuộc tính là name và value, và một cách thức click[], một thẻ sự kiện onClick.

Hầu hết những người lập trình khong sử dụng thẻ sự kiện onClick của nút reset để kiểm tra giá trị của nút này, đối tượng reset thường dùng để xoá form.

Ví dụ sau minh hoạ cách sử dụng nút reset để xoá các giá trị của form.

reset Example


//SCRIPT>




 

 

PHẦN TỬ SELECT

Danh sách lựa chọn trong các form HTML xuất hiện menu drop-down hoặc danh sách cuộn được của các đối tượng có thể được lựa chọn. Các danh dách được xây dựng bằng cách sử dụng hai thẻ SELECT và OPTION.

 
    1
    2
    3
    
    

Tạo ra ba thành phần của menu thả drop-down với ba lựa chọn 1,2 và 3. Sử dụng thuộc tính SIZE bạn có thể tạo ta một danh sách cuộn với số phần tử hiển thị ở lần thứ nhất.

Để bật menu drop-down trong một menu cuộn với hai thành phần hiển thị, bạn có thể sử dụng như sau:

 
    1
    2
    3
    
    

Trong cả hai ví dụ trên, người sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc tính MULTIPLE, bạn có thể cho phép người sử dụng lựa chọn nhiều hơn một giá trị trong danh sách lựa chọn:

    1
    2
    3
    
    

Danh sách lựa chọn trong JavaScript là đối tượng select. Đối tượng này tạo ra một vài thành phần tương tự các button và radio.

Với các thành phần lựa chọn, danh sách các lựa chọn được chứa trong một mảng được đánh số từ 0. Trong trường hợp này, mảng là một thuộc tính của đối tượng select gọi là options.

Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, phần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option được lựa chọn hiện thời.

Mỗi option trong danh sách lựa chọn đều có một vài thuộc tính:

• DEFAULTSELECTED: cho biết option có được mặc định là lựa chọn trong thẻ OPTION hay không.
• INDEX: chứa giá trị số thứ tự của option hịên thời trong mảng option.
• SELECTED: cho biết trạng thái hiện thời của option
• TEXT: có chứa giá trị của dòng text hiển thị trên menu cho mỗi option, và thuộc tính value mọi giá trị chỉ ra trong thẻ OPTION.

Đối tượng select không có các cách thức được định nghĩa sẵn. Tuy nhiên, đối tượng select có ba thẻ sự kiện, đó là onBlue, onFocus, onChange, chúng đều là những đối tượng text.

Bạn có danh sách lựa chọn sau:

 
     1
     2
     3
 

Khi lần đầu tiên hiển thị bạn có thể truy nhập tới các thông tin sau:

example.options[1].value = "The Second"
example.options[2].text = "3"
example.selectedIndex = 0
example.options[0].defaultSelected = true
example.options[1].selected = false 

Nếu người sử dụng kích vào menu và lựa chon option thứ 2 thì thẻ Onfocus sẽ thực hiệ, và khi đó giá trị của thuộc tính sẽ là:

example.options[1].value = "The Second"
     example.options[2].text = "3"
     example.selectedIndex = 1
     example.options[0].defaultSelected = true
     example.options[1].selected = true

Sửa các danh sách lựa chọn

Navigator 3.0 cho phép thay đổi nội dung của danh sách lựa chọn từ JavaScript bằng cách liên kết các giá trị mới cho thuộc tính text của các thực thể trong danh sách.

Trong ví dụ trước, bạn đã tạo ra một danh sách lựa chọn như sau:

 
     1
     2
     3
     

Có thể thêm các lựa chọn mới vào danh sách bằng cách sử dụng đối tượng xây dựng Option[] theo cú pháp:

newOptionName = new Option[optionText, optionValue, defaultSelected, selected];
selectListName.options[index] = newOptionName;

Việc tạo đối tượng option[] này với dòng text được chỉ trước, defaultSelected và selected như trên đã định ra những giá trị kiểu Boolean. Đối tượng này được liên kết vào danh sách lựa chọn được thực hiện bằng index.

Các lựa chọn có thể bị xoá trong danh sách lựa chọn bằng cách gắn giá trị null cho đối tượng muốn xoá

selectListName.options[index] = null;

Phần tử submit

Nút Submit là một trường hợp đặc biệt của button, cũng như nút Reset. Nút này đưa thông tin hiện tại từ các trường của form tới địa chỉ URL được chỉ ra trong thuộc tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra trong thẻ FORM.

Giống như đối tượng button và reset, đối tượng submit có sẵn thuộc tính name và value, cách thức click[] và thẻ sự kiện onClick.

Phần tử Text

Phần tử này nằm trong những phần tử hay được sử dụng nhất trong các form HTML. Tương tự như trường Password, trường text cho phép nhập vào một dòng đơn, nhưng các ký tự của nó hiện ra bình thường.

Đối tượng text có ba thuộc tính:defautValue, name và value. Ba cách thức mô phỏng sự kiện của người sử dụng: focus[], blur[] và select[]. Có 4 thẻ sự kiện là: obBlur, onFocus, onChange, onSelect. Chú ý các sự kiện này chỉ thực hiện khi con trỏ đã được kích ra ngoài trường text.

Bảng sau mô tả các thuộc tính và cách thức của đối tượng text.

Các thuộc tính và cách thức của đối tượng text.

Cách thức và thuộc tính	Mô tả
defaultValue	Chỉ ra giá trị mặc định của phần tử được chỉ ra trong thẻ INPUT [thuộc tính]
name	Tên của đối tượng được chỉ ra trong thẻ INPUT [thuộc tính]
value	Giá trị hiện thời của phần tử [thuộc tính]
focus[]	Mô tả việc con trỏ tới trường text [cách thức]
blur[]	Mô tả việc con trỏ rời trường text [cách thức]
select[]	Mô tả việc lựa chọn dòng text trong trường text [cách thức]

Một chú ý quan trọng là có thể gán giá trị cho trường text bằng cách liên kết các giá trị với thuộc tính value. Trong ví dụ sau đây, dòng text được đưa vào trường đầu tiên được lặp lại trong trường text thứ hai, và mọi dòng text được đưa vào trường text thứ hai lại được lặp lại trong trường texxt thứ nhất. Khả năng này của nó có thể áp dụng để tự động cập nhật hoặc thay đổi dữ liệu.

Tự động cập nhật trường Text

     
     text Example
     
     
     
     
     
     
      
      
     
     
     

Phần tử Textarea

Thẻ TEXTAREA cung cấp một hộp cho phép nhập số dòng text do người thiết kế định trước.

     Default Text Here

Ví dụ này tạo ra một trường text cho phép đưa vào 10 hàng ,mỗi hàng 25 ký tự. Dòng "Defautl Text Here"sẽ xuất hiện trong trường này vào lần hiển thị đầu tiên.

Cũng như phần tử text , JavaScript cung cấp cho bạn các thuộc tính defaultValue, name, và value, các cách thức focus[], select[], và blur[], các thẻ sự kiện onBlur, onForcus, onChange, onSelect.

Mảng elements[]

Các đối tượng của form có thể được gọi tới bằng mảng elements[].

Tạo ra một form sau:

Bạn có thể gọi tới ba thành phần này như sau: document.elements[0], document.elements[1], document.elements[2], hơn nữa còn có thể gọi document.testform.one, document.testform.two, document.testform.three.

Thuộc tính này thường được sử dụng trong các mối quan hệ tuần tự của các phần tử hơn là dùng tên của chúng.

Mảng form[]

Các thẻ sự kiện được thiết kế để làm việc với các form riêng biệt hoặc các trường ở một thời điểm, nó rất hữu dụng để cho phép gọi tới các form có liên quan trong cùng một trang.

Mảng form[] đề cập đến ở đây có thể có nhiều xác định các nhân của form trên cùng một trang và have information in a single field match in all three forms. Có thể gọi bằng document.forms[] thay vì gọi bằng tên form. Trong script này, bạn có hai trường text để nhập và nằm trên hai form độc lập với nhau. Sử dụng mảng form bạn có thể tương tác trên các giá trị của các trường trong hai form cùng một lúc khi người sử dụng thay đổi giá trị trên một form.

     
     forms[] Example
     
     
     
     
     
     
     
     
     
     

Mặt khác, bạn cũng có thể truy nhập đến form bằng tên form được đặt trong thẻ FORM:

Khi đó bạn có thể gọi là document.forms["name"] hoặc document.name

Xem lại các lệnh và mở rộng

Lệnh/ Mở rộng	Kiểu	Mô tả
blur[]	cách thức JavaScript	Mô tả việc dịch chuyển con trỏ từ một phần tử
form.action	cách thức JavaScript	Xâu chứa giá trị của thuộc tính ACTION trong thẻ FORM
form.elemrnts	thuộc tính JavaScript	mảng chứa danh sách các phần tử trong form [như checkbox, trường text, danh sách lựa chọn]
form.encoding	thuộc tính JavaScript	xâu chứa kiểu MIME sử dụng khi chuyển thông tin từ form tới server
form,name	thuộc tính JavaScript	Xâu chứa giá trị thuộc tính NAME trong thẻ FORM
form.target	thuộc tính JavaScript	Xâu chứa tên cửa sổ đích bởi một form submition
form.submit	cách thức JavaScript	Mô tả việc submit một form HTML
type	thuộc tính JavaScript	ánh xạ kiểu của một phần tử form thành một xâu.
onSubmit	Thẻ sự kiện	thẻ sự kiện cho việc submit
button	thuộc tính HTML	Thuộc tính kiểu cho các nút bấm của HTML []
checkbox	thuộc tính HTML	Thuộc tính kiểu cho các checkbox của HTML []
pasword	thuộc tính HTML	Thuộc tính kiểu cho các dòng pasword của HTML[]
radio	thuộc tính HTML	Thuộc tính kiểu cho các nút radio của HTML []
reset	thuộc tính HTML	Thuộc tính kiểu cho các nút reset của HTML []
SELECT	thẻ HTML	Hộp thẻ cho danh sách lựa chọn
OPTION	thẻ HTML	chỉ ra các lựa chọn trong danh sách lựa chọn[Option 1Option 2]
submit	thuộc tính HTML	Thuộc tính kiểu của nút submit []
text	thuộc tính HTML	Thuộc tính kiểu của trường trong form []
TEXTAREA	Thẻ HTML	Hộp thẻ cho nhiều dòng text [ defautl text ]
name	thuộc tính JavaScript	Xâu chứa tên phần tử HTML [button, checkbox, password...]
value	thuộc tính JavaScript	Xâu chứa giá trị hiên thời của một phần tử HTML[button, checkbox, password...]
click[]	cách thức JavaScript	Mô tả việc kích vào một phần tử trên form [button, checkbox,password]
onClick	thuộc tính JavaScript	Thẻ sự kiện cho sự kiện kích [button, checkbox, radio button, reset, selection list, submit]
checked	thuộc tính JavaScript	Giá trị kiểu Boolean mô tả một lựa chọn check[checkbox, radio button]
defaultChecked	thuộc tính JavaScript	Xâu chứa giá trị mặc định của một phần tử HTML [password, text, textarea]
focus[]	cách thức JavaScript	Mô tả việc con trỏ tới một phần tử [password, text, textarea]
blur[]	cách thức JavaScript	Mô tả việc con trỏ rời khỏi một phần tử [password, text, textarea]
select[]	cách thức JavaScript	Mô tả việc lựa chọn dòng text trong một trường [password, text, textarea]
onFocus[]	Thẻ sự kiện	Thẻ sự kiện cho sự kiện focus[password, selection list, text, textarea]
onBlur	Thẻ sự kiện	Thẻ sự kiện cho sự kiện blur [password, selection list, text, textarea]
onChange	Thẻ sự kiện	Thẻ sự kiện cho sự kiện khi giá trị của trường thay đổi [password, selection list, text, textarea]
onSelect	Thẻ sự kiện	Thẻ sự kiện khi người sử dụng chọn dòng text trong một trường [password, text, textarea]
index	thuộc tính JavaScript	Là một số nguyên mô tả lựa chọn hiện thời trong một nhóm lựa chọn [radio button]
length	thuộc tính JavaScript	Số nguyên mô tả tổng số các lựa chọn trong một nhóm các lựa chọn [radio button]
dafautlSelected	thuộc tính JavaScript	Giá trị Boolean mô tả khi có một lựa chọn được đặt là mặc định [seledtion list]
options	thuộc tính JavaScript	Mảng các lựa chọn trong danh sách lựa chọn
text	thuộc tính JavaScript	Dòng text hiển thị cho một thành phần của menu trong danh sách lựa chọn
TABLE	thẻ HTML	Hộp thẻ cho các bảng HTML
TR	thẻ HTML	Hộp thẻ cho các hàng của một bảng HTML
TD	thẻ HTML	Hộp thẻ cho các ô của một hàng trong một bảng HTML
COLSPAN	thuộc tính HTML	Là thuộc tính của thẻ TD mô tả trong một ô của bảng có nhiều cột
ROWSPAN	thuộc tính HTML	Là thuộc tính của thẻ TD mô tả trong một ô của bảng có nhiều hàng
BODER	thuộc tính HTML	Là thuộc tính của thẻ TABLE mô tả độ rộng đường viền của bảng
document.forms[]	thuộc tính JavaScript	mảng của các đối tượng form với một danh sách các form trong một document
string.substring[]	cách thức JavaScript	Trả lại một xâu con của xâu string từ tham số vị trí ký tự đầu đến vị trí ký tự cuối
Math.floor[]	cách thức JavaScript	Trả lại một giá trị nguyên tiếp theo nhỏ hơn giá trị của tham số đưa vào.
string.length	thuộc tính JavaScript	Giá trị nguyên của số thứ tự ký tự cuối cùng trong xâu string