Nhận giá trị của nút radio Onclick – nút radio javascript onclick

Cách nhận giá trị của một nút radio khi nhấp chuột. Một ví dụ minh chứng. JavaScript được hiển thị và giải thích.

Bạn đang xem : nút radio javascript onclick

Nhận giá trị của lần nhấp vào nút radio

Trên trang này, chúng tôi trình bày và mô tả cách lấy giá trị của một nút radio khi nhấp chuột. Chúng tôi chứng minh bằng mẫu sau. Nhấp vào một nút radio trong biểu mẫu và giá trị của nó sẽ được đặt trong trường tổng.

Demo: Get Value Onclick

Chọn kích thước của bạn:
Nhỏ bé
Vừa phải
Lớn

Tổng: $

JavaScript để truy cập giá trị nút radio khi nhấp vào

Để truy cập giá trị của một nút radio khi nhấp chuột, hãy bắt đầu bằng cách lấy danh sách chứa các tham chiếu đến các nút radio trong nhóm. Sau đó, lặp qua danh sách và gán chức năng xử lý onclick cho mỗi nút radio. JavaScript cho ví dụ của chúng tôi được hiển thị ở đây:

 

var

sz

=

document

.

biểu mẫu

[

'demoForm'

]

.

phần tử

[

'size'

]

;

cho

(

var

i

= < / p>

0

,

len

=

sz

.

length

;

i

& lt;

len < p class = "punch">;

i

++

)

{< / p> sz

[

i

]

.

onclick

=

function

(

)

{

this

.

form

.

phần tử

.

tổng

.

< p class = "prop"> value

=

this

.

value

; }; }

Khi một nút radio được nhấp vào, giá trị của nó có sẵn bên trong hàm được gán cho thuộc tính onclick là this.value . Ví dụ của chúng tôi, hàm đó đặt giá trị của nút radio được nhấp vào trường tổng số của biểu mẫu.

Đánh dấu biểu mẫu mẫu

Đánh dấu cho biểu mẫu mẫu được hiển thị ở đây:

 

& lt;

form

hành động

=

"

#

"

method

=

"

post

"

class

=

"

demoForm

"

id

=

"< / p> demoForm

"

& gt;

& lt;

bộ trường

& gt;

< / p>

& lt;

huyền thoại

& gt;

< / p> Demo: Get Value Onclick

& lt; /

huyền thoại

& gt;

& lt;

p

& gt;

< / p> Chọn kích thước của bạn:

& amp; nbsp;

& lt;

nhãn

& gt;

< / p>

& lt;

input

type < / p>

=

"

radio

" < / p>

name

=

"

size

"

value

=

"

5

"

/ & gt;

& lt; /

nhãn

& gt;

& lt;

nhãn

& gt;

< / p>

& lt;

input

type < / p>

=

"

radio

" < / p>

name

=

"

"

value

=

"

8

"

đã kiểm tra

=

"

đã kiểm tra

"

/ & gt;

Phương tiện

& lt ; /

nhãn

& gt;

& lt;

nhãn

& gt;

< / p>

& lt;

input

type < / p>

=

"

radio

" < / p>

name

=

"

size

"

value

=

"

12

"

/ & gt;

& lt; /

nhãn

& gt;

& lt; /

p

& gt;

& lt;

p

& gt;

< / p>

& lt;

nhãn

& gt;

< / p> Tổng cộng: $

& lt;

đầu vào

=

"

text

"

name

=

"

tổng

"

class

=

"

num

"

value

=

"

8

"

chỉ đọc

=

"

chỉ đọc

"

/ & gt;

& lt; /

nhãn

& gt ;

& lt; /

p

& gt;

& lt; /

bộ trường

& gt;

& lt; /

form

& gt;

Một ví dụ khác kết hợp các hộp kiểm ở trên với các hộp kiểm lớp phủ để có biểu mẫu đặt bánh pizza hoàn chỉnh hơn.

Quay lại đầu trang


Xem thêm những thông tin liên quan đến chủ đề nút radio javascript onclick

JavaScript Tutorial For Beginners #40 – The onClick Event

  • Tác giả: The Net Ninja
  • Ngày đăng: 2015-09-09
  • Đánh giá: 4 ⭐ ( 3403 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey ninjas / ninjarettes, in this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.

    In this example I’ll use the onclick event to create a ‘show more’ style content box which expands and shrinks as you click the button.

    Any questions, fire away :).

    SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

    ========== JavaScript for Beginners Playlist ==========

    https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

    ========== CSS for Beginners Playlist ==========

    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

    ========== HTML for Beginners Playlist ==========

    https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

    ========== The Net Ninja ============

    For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

    ========== Social Links ==========

    Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

JavaScript Radio Button

  • Tác giả: www.javascripttutorial.net
  • Đánh giá: 4 ⭐ ( 4321 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, you will learn how to use JavaScript to check if a radio button is checked or not.

Tổng hợp bài tập JavaScript có code mẫu

  • Tác giả: kunsutiin.com
  • Đánh giá: 4 ⭐ ( 3652 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhằm giúp cho việc học JavaScript của các bạn dễ dàng hơn, mình đã tổng hợp một số bài tập JavaScript có kèm theo lời giải mẫu để các bạn thực hành. Phần đầu sẽ là khoảng 40 bài tập JavaScript có giải mẫu, phía cuối bài viết là những bài tập JavaScript tự giải, những bài…

: Gọi onclick trên danh sách nút radio bằng javascript

  • Tác giả: vi.chathamabc.org
  • Đánh giá: 4 ⭐ ( 4664 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để gọi onclick trên danh sách nút radio bằng javascript?

Calling onclick on a radiobutton list using javascript

  • Tác giả: stackoverflow.com
  • Đánh giá: 4 ⭐ ( 6007 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Lấy giá trị của Radio button checked bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 3285 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cho 2 Radio button có cùng tên là gender (giới tính) gồm hai giá trị là Nam và Nữ, hãy tạo ra một button và xử lý sự kiện khi click vào button đó thì in ra.

Sự kiện onclick trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 9244 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng sự kiện onclick trong HTML.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Kiểu CSS cho Liên kết - lớp css cho liên kết