Lấy giá trị của checkbox trong Javascript

Giả sử có chương trình lấy thông tin về sở thích của người dùng, mỗi sở thích là một checkbox và nếu người dùng thích cái nào thì check vào cái đó. Hãy tạo ra một button xử lý khi click vào button đó thì hiển thị danh sách các sở thích mà người dùng đa chọn.

Lấy giá trị của checkbox trong Javascript

Lấy giá trị của checkbox trong Javascript

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để lấy giá trị của checkbox thì ta sử dụng cú pháp như sau.

Trong đó checkboxObj là một đối tượng HTML được lấy bởi DOM (tham khảo một số cách truy vấn DOM thông dụng).

Bài viết này được đăng tại [free tuts .net]

Nếu checkboxObj là một mảng các đối tượng checkbox thì bạn phải sử dụng vòng lặp để lặp qua từng phần tử và lấy giá trị. Như trong đề bài này là ta thấy có nhiều checkbox nên chắc chắn là phải sử dụng cách này.

Bài giải tham khảo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Example</title>
    </head>
    <body>
        <h2>Lấy giá trị của checkbox bằng Javascript</h2>
        <p>Hãy viết chương trình khi click vào button thì in ra danh sách sở thích mà người dùng đã chọn.</p>
        
        <input type="checkbox" name="hobby" value="Đi chơi"/> <label>Đi chơi</label> <br/>
        <input type="checkbox" name="hobby" value="Đi du lịch"/> <label>Đi du lịch</label> <br/>
        <input type="checkbox" name="hobby" value="Đi ăn"/> <label>Đi ăn</label> <br/>
        <input type="checkbox" name="hobby" value="Đi siêu thị"/> <label>Đi siêu thị</label> <br/>
        <input type="checkbox" name="hobby" value="học lập trình"/> <label>học lập trình</label> <br/>
        <input type="checkbox" name="hobby" value="Lướt freetuts.net"/> <label>Lướt freetuts.net</label> 
            <br/> <br/>
        
        <input type="button" id="btn" value="Xem kết quả"/>
        
        <script language="javascript">
            document.getElementById('btn').onclick = function()
            {
                // Khai báo tham số
                var checkbox = document.getElementsByName('hobby');
                var result = "";
                
                // Lặp qua từng checkbox để lấy giá trị
                for (var i = 0; i < checkbox.length; i++){
                    if (checkbox[i].checked === true){
                        result += ' [' + checkbox[i].value + ']';
                    }
                }
                
                // In ra kết quả
                alert("Sở thích là: " + result);
            };
        </script>
    </body>
</html>

Giả sử có chương trình lấy thông tin về sở thích của người dùng, mỗi sở thích là một checkbox và nếu người dùng thích cái nào thì check vào cái đó. Hãy tạo ra một button xử lý khi click vào button đó thì hiển thị danh sách các sở thích mà người dùng đa chọn.

Để lấy giá trị của checkbox thì ta sử dụng cú pháp như sau.

Trong đó checkboxObj là một đối tượng HTML được lấy bởi DOM (tham khảo một số cách truy vấn DOM thông dụng).

Bạn đang xem: Lấy giá trị checkbox checked bằng Javascript

Nếu checkboxObj là một mảng các đối tượng checkbox thì bạn phải sử dụng vòng lặp để lặp qua từng phần tử và lấy giá trị. Như trong đề bài này là ta thấy có nhiều checkbox nên chắc chắn là phải sử dụng cách này.

Bài giải tham khảo

    
        
        
        Javascript Example
    
    
        
        

Hãy viết chương trình khi click vào button thì in ra danh sách sở thích mà người dùng đã chọn.

Đi chơi
Đi du lịch
Đi ăn
Đi siêu thị
học lập trình
Lướt freetuts.net

Đăng bởi: MyLop

Chuyên mục: Học Lập Trình

Back to top button

Lấy giá trị của checkbox trong Javascript

Lấy giá trị của checkbox trong Javascript

Danh mục bài viết

  • Api docs (1)
  • array (2)
  • centos (9)
  • Code css (13)
  • Custom elementor (1)
  • Dokan (4)
  • Dự án (34)
  • Đào tạo làm web bán hàng bằng wordpress (1)
  • Ebook hướng dẫn thiết kế theme wordpress (32)
  • Editor TinyMCE (2)
  • Elementor (1)
  • Fix lỗi xampp (1)
  • Flatsome custom (5)
  • Framework (1)
  • Functions (9)
  • Giới thiệu Plugin (1)
  • Giới thiệu plugins (1)
  • Gravity Form Plugin (1)
  • Gutenberg (1)
  • Hệ điều hành linux (1)
  • Học woocommerce (28)
  • Học Wordpress (33)
  • Hosting giá rẻ (2)
  • Hosting và Domain (2)
  • Hướng dẫn sử dụng xampp (1)
  • Hướng dẫn viết theme (2)
  • Javascript (1)
  • Javascript và jquery (13)
  • Khách hàng (1)
  • Khóa học (1)
  • Khóa học phát triển theme wordpress (3)
  • Kiến thức nền (26)
  • Linh tinh (3)
  • Mã độc malware wordpress (1)
  • mailchimp api (1)
  • Multisite wordpress (1)
  • PageSpeed Insights (1)
  • Php (12)
  • Plugins do fcwordpress viết (1)
  • Social network (4)
  • Sử dụng github (1)
  • Theme tự viết (17)
  • theme wordpress đẳng cấp (2)
  • Thủ thuật css (5)
  • Thủ thuật genesis child theme (3)
  • Thủ thuật wordpress (7)
  • Tìm hiểu về hệ quản trị wordpress (7)
  • Tool cho dev (2)
  • Tư liệu woocommerce (37)
  • Tuts (70)
  • Vesta CP (14)
  • VPS (16)
  • VPS tenten (8)
  • vue js (11)
  • Wordpress: Kiến thức chung (7)

Hướng dẫn thiết kế theme

  • Thiết kế theme wordpress phần 8

    Nếu bạn chưa xem phần 7 thì xem theo link dưới

  • Thiết kế theme wordpress phần 7

    Thiết kế theme wordpress phần 6 Chúng ta tiếp

  • Thiết kế theme wordpress phần 6

    Nếu chưa xem phần 5 thì xem theo link dưới nhé

  • Thiết kế theme wordpress phần 5

    Nếu bạn chưa xem phần 4 thì xem theo link dưới

  • Thiết kế theme wordpress-phần 4

    Đã khá lâu rồi tôi mới viết bài, vì  là quá

Các functions thường dùng

  • Function xử lý upload to media wordpress

    Function xử lý upload to media wordpress: function sau đây mình

  • Function get ip address

    Dưới đây là function lấy địa chỉ ip, Để đây anh

  • Thay thế file_get_contents

    Thay thế file_get_contents: đôi lúc gặp những hosting function file_get_contents không

  • Code tích hợp acf vào theme và plugin

    Xin lưu ý tài liệu này chỉ dành cho anh em

  • Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)

    Một số function thường dùng khi làm theme wordpress (some functions

  • Hotline: 0912 889 416

  • Lấy giá trị của checkbox trong Javascript
    Lấy giá trị của checkbox trong Javascript
    Lấy giá trị của checkbox trong Javascript
    Lấy giá trị của checkbox trong Javascript

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress