Hộp kiểm JavaScript - cách chọn hộp kiểm trong javascript

trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript để kiểm tra xem một hộp kiểm có được chọn hay không và cách lấy giá trị của các hộp kiểm đã chọn.

Bạn đang xem : cách chọn hộp kiểm trong javascript

Tóm tắt : trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript để kiểm tra xem hộp kiểm có được chọn hay không, nhận giá trị của các hộp kiểm đã chọn và chọn / bỏ chọn tất cả các hộp kiểm.

Tạo hộp kiểm HTML < / h2>

Để tạo một hộp kiểm, bạn sử dụng phần tử & lt; input & gt; với type of hộp kiểm như sau:

   
 & lt; 
 input 
  type 
 =  "checkbox" 
  id < / p> = 
 "chấp nhận" 
 & gt; 
 Chấp nhận  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Một phương pháp hay là luôn liên kết hộp kiểm với nhãn để cải thiện khả năng sử dụng và khả năng tiếp cận. Bằng cách thực hiện việc này, việc nhấp vào nhãn cũng sẽ chọn hoặc bỏ chọn hộp kiểm.

   
 & lt; 
 nhãn 
  cho 
 = " accept " 
 & gt; 
    & lt; 
 input 
  type 
 = " hộp kiểm "
  id 
 = " accept "
  name 
 = " accept "
  value 
 = " có "
 & gt;  Chấp nhận
 & lt; / 
 nhãn 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Hoặc:

  < code class = "hljs language-xml"> 
 & lt; 
 input 
  type  = 
 "hộp kiểm" 
  id 
 =  "accept" < / p> 
 name 
 =  "accept" 
  value  = 
 "có" 
 & gt; 
 & lt; 
 label 
  cho 
 = " accept "
 & gt; 
 Chấp nhận  & lt; / 
 nhãn 
 & gt;   
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Lưu ý rằng thuộc tính for giá trị của nhãn phải khớp với id của hộp kiểm.

Các cách sau hoạt động nhưng không hợp lệ nên bạn nên tránh:

   
 & lt; 
 input 
  type 
 =  "hộp kiểm" 
  id 
 =  "chấp nhận "
  name 
 = " accept "
  value < / p> = 
 "yes" 
 & gt; 
 Chấp nhận  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Kiểm tra xem hộp kiểm có được chọn hay không

Một hộp kiểm có hai trạng thái: đã chọn và bỏ chọn.

Để có được trạng thái của hộp kiểm, bạn làm theo các bước sau:

Đầu tiên, chọn hộp kiểm bằng phương thức DOM, chẳng hạn như getElementById () hoặc querySelector () .
Sau đó, truy cập vào đã chọn thuộc tính của phần tử hộp kiểm. Nếu thuộc tính check của nó là true , thì hộp kiểm sẽ được chọn; nếu không thì không.

Xem ví dụ sau:

  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 

 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 =  "width = device-width, initial-scale = 1.0"  & gt; < / p>
     & lt; 
 title 
 & gt; 
 Hộp kiểm JavaScript  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 
 & lt; 
 body 
 & gt; 
     & lt; 
 label 
  cho 
 = " accept "
 & gt; 
         & lt; 
 input 
  type 
 = " hộp kiểm "
  id 
 = " accept "
  name 
 = " accept "
  value 
 = " có "
 & gt;  Chấp nhận
     & lt; / 
 nhãn 
 & gt; 

     & lt; 
 script 
 & gt; 
 
        
 const 
 cb =  document 
 .querySelector ( '# accept' < / p>);
        
 console  .log (cb.checked);
    
  & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Trong ví dụ này:

Đầu tiên, hãy tạo phần tử hộp kiểm HTML:

   
 & lt; 
 nhãn 
  cho 
 =  "chấp nhận" 
 & gt; 
    & lt; 
 input 
  type 
 = " hộp kiểm "
  id 
 = " accept "
  name 
 = " accept "
  value 
 = " có "
 & gt;  Chấp nhận
 & lt; / 
 nhãn 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Thứ hai, chọn hộp kiểm có id #accept và kiểm tra đã kiểm tra thuộc tính :

   
 const  cb = 
 document 
 .querySelector ( '# accept' );
 console 
 .log (cb.checked);  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 )

Vì hộp kiểm không được chọn, bạn sẽ thấy false trong bảng điều khiển:

   
 false 
  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript  
)

Hãy xem xét một ví dụ khác:

  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 
 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 = " width = device-width, initial-scale = 1.0 "< / p> & gt; 
     & lt; 
 title 
 & gt; 
 Hộp kiểm JavaScript  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 
     & lt; 
 label 
  cho 
 = " accept "
 & gt; 
         & lt; 
 input 
  type 
 = " hộp kiểm "
  id 
 = " accept "
  name 
 = " accept "
  value 
 = " có "
 & gt;  Chấp nhận
     & lt; / 
 nhãn
 & gt; 

     & lt; 
 script 
 & gt; 
 
        
 const 
 checks =  document 
 .querySelector ( '# accept: đã kiểm tra '
)! ==  null ;
         console  .log (đã chọn);
    
  & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 
 & lt; / 
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Trong ví dụ này, bộ chọn #accept: đã kiểm tra chọn phần tử có id #accept và đã kiểm tra thuộc tính . Ví dụ: nó khớp với phần tử sau:

   
 & lt ; 
 input 
  type 
 =  "checkbox" 
 < p class = "hljs-attr"> id 
 =  "accept" 
  đã kiểm tra 
 & gt; < / p> Chấp nhận  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Nhưng không cái này:

   
 & lt; 
 input 
  type 
 = " hộp kiểm "
  id 
 = " accept "
 & gt; 
 Chấp nhận  
  Ngôn ngữ mã: 
  HTML, XML 
  ( 
 xml 
 )

Do đó, nếu phần tử hộp kiểm có id #accept được chọn, document.querySelector () sẽ trả về. Trên cửa sổ bảng điều khiển, bạn sẽ thấy giá trị false vì hộp kiểm không được chọn:

   
 false 
  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
  )

Nhận giá trị hộp kiểm

Trang sau hiển thị một hộp kiểm và một nút. Khi nhấp vào nút, bạn sẽ thấy giá trị của hộp kiểm trên cửa sổ bảng điều khiển:

  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 

 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 = " width = device-width, initial-scale = 1.0 "< / p> & gt; 
     & lt; 
 title 
 & gt; 
 Hộp kiểm JavaScript  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 
     & lt; 
 label 
  cho 
 = " accept "
 & gt; 
         & lt; 
 input 
  type 
 = " hộp kiểm "
  id 
 = " accept "
  name 
 = " accept "
 & gt;  Chấp nhận
     & lt; / 
 nhãn 
 & gt; 

    Nút  & lt; 
 
  id 
 = " btn "
 & gt; 
 Gửi nút  & lt; / 
 
 & gt; 
     & lt; 
 script 
 & gt; 
 
        
 const 
 cb =  document 
 .querySelector ( '# accept' < / p>);
        
 const 
 btn =  document 
 .querySelector ( '# btn' < / p>);
        btn.onclick = 
 
 () 
 = & gt;  {
           cảnh báo (cb.value);
        };
    
  & lt; / 
 script 
 & gt; 
 & lt; / 
 body 
 & gt; 

 & lt; /
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Khi bạn nhận thuộc tính value của một hộp kiểm, bạn luôn nhận được chuỗi 'on' cho dù hộp kiểm được chọn hay không.

Nhận giá trị của nhiều hộp kiểm đã chọn

Trang sau hiển thị ba hộp kiểm. Nếu bạn chọn một hoặc nhiều hộp kiểm và nhấp vào nút, nó sẽ hiển thị các giá trị của hộp kiểm đã chọn:

  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 

 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 = " width = device-width, initial-scale = 1.0 "< / p> & gt; 
     & lt; 
 title 
 & gt; 
 Hộp kiểm JavaScript  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 
     & lt; 
 p 
 & gt; 
 Chọn màu sắc yêu thích của bạn:  & lt; / 
 p 
 & gt; 
     & lt; 
 label 
  cho 
 = " c1 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " red "
  id 
 = " c1 "
 & gt; 
 Đỏ  & lt; / 
 nhãn 
 & gt; 
     & lt; 
 label 
  cho 
 = " c2 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " green "
  id 
 = " c2 "
 & gt; 
 Màu xanh lá cây  & lt; / 
 nhãn 
 & gt; 
     & lt; 
 label 
  cho 
 = " c3 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " blue "
  id 
 = " c3 "
 & gt; 
 Màu xanh lam  & lt; / 
 nhãn 
 & gt; 
     & lt; 
 p 
 & gt; 
        Nút  & lt; 
 
  id 
 = " btn "
 & gt; 
 Nhận các Màu đã Chọn  & lt; / 
 nút  & gt; < / p>
     & lt; / 
 p 
 & gt; 

     & lt; 
 script 
 & gt; 
 
        
 const 
 btn =  document 
 .querySelector ( '# btn' < / p>);
        btn.addEventListener (
 'click' , (event) = & gt; {
             let 
 checkboxes =  document 
 .querySelectorAll ( 'input [name = "color"]: đã kiểm tra ');
             let  values = [];
            checkboxes.forEach ( (
 checkbox 
) = & gt;  {
                value.push (checkbox.value);
            });
            alert (giá trị);
        });
    
  & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 )

Cách hoạt động.

Trong HTML, chúng tôi tạo ba phần tử hộp kiểm với cùng tên (màu) nhưng có giá trị khác biệt:

   
 & lt ; 
 nhãn 
 cho 
 =  "c1" 
 & gt; 
  & lt ; 
 input 
  type 
 =  "checkbox" 
 < p class = "hljs-attr"> name 
 =  "color" 
  value 
 =  "red" 
  id 
 =  "c1" 
 & gt; 
 Nhãn  & lt; / 
 màu đỏ 
 & gt; 
 & lt; 
 label 
  cho 
 = " c2 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " green "
  id 
 = " c2 "
 & gt; 
 Màu xanh lá cây  & lt; / 
 nhãn 
 & gt; 
 & lt; 
 label 
  cho 
 = " c3 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " blue "
  id 
 = " c3 "
 & gt; 
 Màu xanh lam  & lt; / 
 nhãn 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 ) < / p>

Trong JavaScript:

Đầu tiên, thêm trình xử lý sự kiện nhấp chuột vào nút:

   
 const 
 btn =  document 
 .querySelector ( '#btn' );
btn.addEventListener ( 'click' , (event) = & gt; {
    
});  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 )

Thứ hai, chọn các hộp kiểm đã chọn bằng cách sử dụng Phương thức document.querySelectorAll () bên trong trình xử lý sự kiện nhấp chuột:

   < p class = "hljs-keyword"> let 
 checkboxes =  document 
 .querySelectorAll ( 'input [name = " color "]: đã kiểm tra '
);  
  Ngôn ngữ mã: 
  JavaScript  
 (
  javascript 
 ) 
   Thứ ba, đẩy giá trị của các hộp kiểm đã chọn vào một mảng: 
    
 let 
 va lues = [];
checkboxes.forEach ( (
 checkbox 
) = & gt;  {
    value.push (checkbox.value);
});

alert (giá trị);  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 Bản trình diễn: < / p> 

 Chọn / Bỏ chọn tất cả các hộp kiểm 
 Trang sau có ba hộp kiểm và một nút. Khi bạn nhấp vào nút, nếu các hộp kiểm được chọn, chúng sẽ được bỏ chọn và ngược lại: 
  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 
 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 = " width = device-width, initial-scale = 1.0 "< / p> & gt; 
     & lt; 
 title 
 & gt; 
 JavaScript Đánh dấu / bỏ chọn hộp kiểm  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 
 & lt; 
 body 
 & gt; 
     & lt; 
 p 
 & gt; 
        Nút  & lt; 
 
  id 
 = " btn "
 & gt; 
 Chọn / Bỏ chọn Tất cả nút  & lt; / 
 
 & gt; 
     & lt; / 
 p 
 & gt; 
     & lt; 
 nhãn 
 cho 
 =  "c1" 
 & gt; 
  & lt ; 
 input 
  type 
 =  "checkbox" 
 < p class = "hljs-attr"> name 
 =  "color" 
  value 
 =  "red" 
  id 
 =  "c1" 
 & gt; 
 Nhãn  & lt; / 
 màu đỏ 
 & gt; 
     & lt; 
 label 
  cho 
 = " c2 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " green "
  id 
 = " c2 "
 & gt; 
 Màu xanh lá cây  & lt; / 
 nhãn 
 & gt; 
     & lt; 
 label 
  cho 
 = " c3 "
 & gt; 
  & lt; 
 input 
  type 
 = " checkbox "
  name 
 = " color "
  value 
 = " blue "
  id 
 = " c3 "
 & gt; 
 Màu xanh lam  & lt; / 
 nhãn 
 & gt; 

     & lt; 
 script 
 & gt; 
 
        
 
 function 
  kiểm tra 
 ( đã kiểm tra = true 
)  {
             const 
 checkboxes =  document 
 .querySelectorAll ( 'input [name = "màu"] ');
            checkboxes.forEach ( (
 checkbox 
) = & gt;  {
                checkbox.checked = đã kiểm tra;
            });
        }

         
 function 
  checkAll 
 ( 
)  {
            lựa chọn();
             this  .onclick = uncheckAll;
        }

         
 function 
  Bỏ chọnAll 
 ( 
)  {
            select ( false );
             this  .onclick = checkAll;
        }

         const 
 btn =  document 
 .querySelector ( '# btn' < / p>);
        btn.onclick = checkAll;
    
  & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 
 & lt; / 
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 ) 
 
 Cách hoạt động: 
 Đầu tiên, hãy xác định  check () < / code> chức năng kiểm tra hoặc bỏ chọn tất cả các hộp kiểm có tên  "color" : 

   
 
 function 
  kiểm tra 
 ( check = true 
)  {
   const 
 checkboxes =  document 
 .querySelectorAll ( 'input [name = "màu"] ');
  checkboxes.forEach ( (
 checkbox 
) = & gt;  {
    checkbox.checked = đã kiểm tra;
  });
}  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 Khi bạn nhấp vào nút, nó đã chọn tất cả các hộp kiểm. Và. Nếu bạn nhấp lại vào nút, nó sẽ bỏ chọn tất cả các hộp kiểm. Để thực hiện chuyển đổi này, bạn cần chỉ định lại trình xử lý sự kiện nhấp chuột bất cứ khi nào sự kiện nhấp chuột kích hoạt. 
 Thứ hai, chọn nút  #btn  và gán  checkAll () < / code> hàm thuộc tính  onclick  của nút: 

   < p class = "hljs-keyword"> const 
 btn =  document 
 .querySelector ( '# btn' );
btn.onclick = checkAll;  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 Thứ ba, xác định hàm  checkAll ()  kiểm tra tất cả các hộp kiểm: 
   
 
 chức năng  
 checkAll 
 ( 
)  {
  kiểm tra();
   this  .onclick = uncheckAll;
}
 
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 Cuối cùng, xác định  Bỏ chọn Tất cả ()  hàm bỏ chọn tất cả các hộp kiểm: 
   
 
 function 
  Bỏ chọnAll 
 ( ) < / p> {
  check ( false );
   this  .onclick = checkAll;
}  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 Bản trình diễn: 
 < p class = "output"> 
 Tạo động các hộp kiểm 
 Ví dụ sau đây cho thấy cách tạo động các hộp kiểm bằng JavaScript: 
  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 
 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 = " width = device-width, initial-scale = 1.0 "< / p> & gt; 
     & lt; 
 title 
 & gt; 
 Hộp kiểm JavaScript  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 
 & lt; 
 body 
 & gt; 
     & lt; 
 div 
  id 
 = " root "
 & gt; 
  & lt; / 
 div 
 & gt; 
     & lt; 
 script 
 & gt; 
 
        
 const 
 color = [ "Red" 
,  "Green" < / p>, 
 "Xanh lam" ];
        color.forEach ( (
 color 
) = & gt;  {
             
             const 
 id =  `color- 
 $ {color} ` < / p>;

             
             const 
 label =  document 
 .createElement ( 'label' );
            label.setAttribute (
 "for" , id);
           
             
             const 
 checkbox =  document 
 .createElement ( 'input' );
            checkbox.type = 
 "hộp kiểm" ;
            checkbox.name =  "color" ;
            checkbox.value = color;
            checkbox.id = id;

             
            label.appendChild (hộp kiểm);
             
            label.appendChild ( document  .createTextNode (color));
             
             document 
 .querySelector ( "# root" ) .appendChild (nhãn);
        });
    
  & lt; / 
 script 
 & gt; 
 & lt; / 
 body 
 & gt; 
 & lt; / 
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 ) 
 
 Đầu ra: 
  < code class = "hljs language-xml"> 
 & lt; 
 div 
  class  = 
 "output-cont" 
 & gt; 
  & lt; 
 div 
  class 
 =  "output" 
 & gt; 
 & lt; 
 iframe 
  height 
 = " 250px "
  src 
 = " https://www.javascripttutorial.net/sample/dom /checkbox/checkbox-dynamic.html"
>
 & lt; / 
 iframe  & gt; < / p>
 & lt; / 
 div 
 & gt; 
  & lt; / 
 div 
 & gt; 
  
 Ngôn ngữ mã: 
  HTML, XML 
  (
 < p class = "shcb-language__slug"> xml 
 ) 
 
 Cách hoạt động. 
 Đầu tiên, hãy xác định một mảng bao gồm ba chuỗi. Trên thực tế, bạn có thể có mảng đến từ kết quả của lệnh gọi API: 
   
 const 
 color = [ "Red" 
,  "Green" , 
 "Blue" 
];  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 Thứ hai, hãy lặp lại các phần tử của mảng và: 
 1) Tạo một id duy nhất cho mỗi hộp kiểm: 
   
 const 
 id = ` color- < p class = "hljs-subst"> $ {color} 
 `
;  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 < p class = "shcb-language__paren">) 
 
 2) Tạo nhãn và gán id cho thuộc tính for: 
   
 const 
 label =  document 
 .createElement (  'nhãn' );
label.setAttribute ( "for" 
, id);  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 3) Tạo hộp kiểm: 
   
 const 
 checkbox =  document 
 .createElement ( 'input ');
checkbox.type =  "hộp kiểm" ;
checkbox.name =  "color" ;
checkbox.value = color;
checkbox.id = id;  
  Ngôn ngữ mã: 
  JavaScript 
  (
  javascript 
 ) 
 
 4) Đặt hộp kiểm bên trong nhãn: 
   
 label 
 . appendChild 
 ( hộp kiểm 
);  
  Ngôn ngữ mã: 
  CSS 
  (
  css 
 ) 
 
 5) Tạo một nút văn bản và nối nó vào nhãn:  
   
 nhãn 
 . appendChild 
 ( document 
 . createTextNode  (
 color 
));  
  Ngôn ngữ mã: 
  CSS 
  (
  css 
 ) 
 
 6) Thêm nhãn vào phần tử gốc: 
   
 document 
 . querySelector 
 ("  # root 
") . appendChild 
 ( label 
); < / code> 
  Ngôn ngữ mã: 
  CSS 
  ( 
  css 
 ) 
 

 Ví dụ sau cũng tạo động các hộp kiểm như ví dụ trên: 
  
 & lt; 
 html 
  lang 
 = " vi "
 & gt; 
 & lt; 
 head 
 & gt; 
     & lt; 
 meta 
  bộ ký tự 
 = " UTF-8 "
 & gt; 
     & lt; 
 meta 
  name 
 = " viewport "
  content 
 = " width = device-width, initial-scale = 1.0 "< / p> & gt; 
     & lt; 
 title 
 & gt; 
 Hộp kiểm JavaScript  & lt; / 
 title 
 & gt; 
 & lt; / 
 head 
 & gt; 
 & lt; 
 body 
 & gt; 
     & lt; 
 div 
  id 
 = " root "
 & gt; 
  & lt; / 
 div 
 & gt; 
     & lt; 
 script 
 & gt; 
 
        
 const 
 color = [ "Red" 
,  "Green" < / p>, 
 "Xanh lam" ];
         const 
 html = Colors.map ( 
 color 
 = & gt; < / p>  `& lt; label for =" color- 
 $ {color}  "& gt;
                & lt; input type = "checkbox" name = "color" id = "color-  $ {color} 
" value = " $ {color} 
 "& gt;  $ {color} 
            & lt; / label & gt; `
        ) .join ( '' );
        document 
 .querySelector ( "# root" ) .innerHTML = html;
    
  & lt; / 
 script 
 & gt; 
 & lt; / 
 body 
 & gt; 
 & lt; / 
 html 
 & gt; 
  
  Ngôn ngữ mã: 
  HTML, XML 
  (
  xml 
 ) 
 
 Trong ví dụ này: 

 Đầu tiên, tạo nhãn và phần tử hộp kiểm bằng cách sử dụng phương thức Array   map ()   và  các chữ mẫu . 
 Thứ hai, nối các chuỗi HTML thành một HTML duy nhất bằng cách sử dụng phương thức String  join () . 
 Thứ ba, nối HTML vào phần tử  #root . 

 Tóm tắt 

 Sử dụng phần tử  & lt; input & gt;  với loại  hộp kiểm  để tạo phần tử hộp kiểm. 
 Vị trí hộp kiểm bên trong phần tử nhãn để cải thiện tính khả dụng và khả năng truy cập. 
 Sử dụng thuộc tính  checkbox.checked  hoặc công cụ chọn : check  để kiểm tra xem hộp kiểm có được chọn không . 
 Nhận giá trị  < / code> thuộc tính để nhận giá trị của hộp kiểm. 


 Hướng dẫn này có hữu ích không? 
 < / p>




Xem thêm những thông tin liên quan đến chủ đề cách chọn hộp kiểm trong javascript
How to determine if checkbox was checked in a form using JavaScript




Tác giả: Campsite Coders
Ngày đăng: 2021-03-02
Đánh giá: 4 ⭐ ( 7282 lượt đánh giá )
Khớp với kết quả tìm kiếm: In this video I will show you how to write a JavaScript function for your form to see if a checkbox was checked or not. If the user checked the box, we will print out HTML stating that the user has checked the box.
Campsite Coders is an educational website that teaches students how to code for web development. Courses include HTML5, CSS and JavaScript.  Learn to code at https://www.campsitecoders.com - SUBSCRIBE for more free content.

HTML: Hộp kiểm trong JavaScript

Tác giả: vi.fmihm.org
Đánh giá: 3 ⭐ ( 6621 lượt đánh giá )
Khớp với kết quả tìm kiếm: Tôi có một rắc rối. Tôi phải tạo một biểu mẫu có năm hộp kiểm. Người dùng phải chọn chính xác ba trong số năm hộp kiểm. Tại thời điểm thay đổi, hộp kiểm cập nhật điểm đánh dấu tại hộp kiểm Khi ...

Bỏ chọn hộp kiểm bằng JavaScript (jQuery hoặc vani)?

Tác giả: vi.sunflowercreations.org
Đánh giá: 5 ⭐ ( 8438 lượt đánh giá )
Khớp với kết quả tìm kiếm: Làm cách nào để chọn / bỏ chọn một hộp kiểm bằng JavaScript, jQuery hoặc vani?

Kiểm tra / Bỏ chọn hộp kiểm với JavaScript (jQuery hoặc vanilla)?

Tác giả: qastack.vn
Đánh giá: 5 ⭐ ( 7435 lượt đánh giá )
Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Javascript: // Check document.getElementById("checkbox").checked = true; // Uncheck document.getElementById("checkbox").checked = false; jQuery (1.6+): // Check $("#checkbox").prop("checked",…

Hộp thoại - Alert, Prompt, Confirmation trong JavaScript

Tác giả: quantrimang.com
Đánh giá: 3 ⭐ ( 5325 lượt đánh giá )
Khớp với kết quả tìm kiếm: JavaScript hỗ trợ 3 kiểu hộp thoại quan trọng. Những hộp thoại này có thể được sử dụng để thông báo, xác nhận input, hoặc nhận input từ người dùng. Dưới đây chúng ta bàn luận từng kiểu hộp thoại một.

Làm cách nào để kiểm tra xem một hộp kiểm đã được chọn bằng JavaScript hay chưa?

Tác giả: tech-wiki.online
Đánh giá: 3 ⭐ ( 4228 lượt đánh giá )
Khớp với kết quả tìm kiếm: 

Chọn tất cả hộp kiểm bằng Javascript hoặc bảng điều khiển

Tác giả: vie.fitforlearning.org
Đánh giá: 3 ⭐ ( 1616 lượt đánh giá )
Khớp với kết quả tìm kiếm: Tôi có 100 Hộp kiểm trên trang web của mình. Vì mục đích thử nghiệm, tôi muốn đánh dấu vào tất cả các ô đó, nhưng việc nhấp chuột theo cách thủ công rất mất thời gian. Có cách nào khả thi để đánh dấu chúng không? Có lẽ một JavaS ...

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  Các loại giá trị Boolean trong Java với các ví dụ - biến boolean trong java