Hướng dẫn này nêu bật cách bạn có thể yêu cầu số hộp kiểm tối thiểu và tối đa trong một nhóm có thể được chọn. Ví dụ: bạn có thể có một danh sách gồm tám hộp kiểm, sau đó bạn yêu cầu người dùng chọn tối thiểu ba tùy chọn nhưng muốn ngăn người dùng này chọn nhiều hơn năm tùy chọn

Hãy bắt đầu

1. Nhấp vào biểu tượng bánh răng của phần tử Nhiều lựa chọn [hộp kiểm] để mở bảng Thuộc tính
2. Chuyển đến tab Khảo sát
3. Kích hoạt tùy chọn Entry Limits
4. Nhập phạm vi yêu cầu của bạn vào các trường Tối thiểu và Tối đa

Trên biểu mẫu, một thông báo cảnh báo sẽ xuất hiện nếu người dùng cố gắng gửi nó trong khi số lượng tùy chọn đã chọn nằm ngoài phạm vi yêu cầu

Xin chào,

Tôi có một biểu mẫu có các hộp kiểm và tôi muốn mọi người chỉ có thể chọn 3 hộp kiểm chứ không phải tất cả các hộp kiểm đó.
Tôi cho rằng javascript là cần thiết cho việc đó và tôi đã tìm thấy đoạn mã này mà tôi đã điều chỉnh cho phù hợp với lớp học của mình

Tôi cũng đã thêm đúng lớp vào đầu vào của mình [tôi đã cố gắng nhập vào hộp kiểm, tên, cả hai] nhưng tập lệnh không hoạt động

Ai có thể giúp đỡ?

Cảm ơn

Sự mô tả. Tập lệnh ngắn nhưng thiết thực này cho phép bạn giới hạn số lượng hộp kiểm trong một nhóm có thể được kiểm tra. Ví dụ: bạn có thể có một danh sách gồm 5 hộp kiểm, nhưng muốn cho phép người dùng chỉ có khả năng kiểm tra tối đa 2 hộp bất kỳ lúc nào. Sử dụng tập lệnh này để thực hiện điều đó

Thí dụ. Vui lòng chọn 2 quốc gia yêu thích hàng đầu của bạn bên dưới

Directions

Bước 1. Chèn tập lệnh sau vào phần trên trang của bạn

Bước 2. Thêm mẫu dưới đây vào phần

Hoa Kỳ
Canada
Nhật Bản
Trung Quốc
Pháp

Như minh họa ở cuối đoạn mã của Bước 2, chỉ cần gọi hàm checkboxlimit[] theo mẫu có các hộp kiểm được đề cập với cú pháp sau

Đôi khi, bạn có thể cần đặt số lượng lựa chọn khả dụng tối đa khi sử dụng hộp kiểm

Ví dụ: nếu bạn có tám lựa chọn và bạn chỉ muốn có tối đa ba lựa chọn trong số đó được chấp nhận

Với mục đích này, chúng tôi sẽ sử dụng một số JavaScript tùy chỉnh để đếm số lần kiểm tra được phép

Sử dụng nút trang tùy chỉnh, tập lệnh trông như thế này

Select Any Two Checkboxs

   Aubrey
	 Laura
	 Byron
  
  
  



function onlyOneCheckBox[] {
	var checkboxgroup = document.getElementById['checkboxgroup'].getElementsByTagName["input"];
	
    //Note #2 Change max limit here as necessary
    var limit = 2;
  
	for [var i = 0; i < checkboxgroup.length; i++] {
		checkboxgroup[i]. title = function[] {
			var checkedcount = 0;
				for [var i = 0; i < checkboxgroup.length; i++] {
				checkedcount += [checkboxgroup[i].checked] ? 1 : 0;
			}
			if [checkedcount > limit] {
				console.log["You can select maximum of " + limit + " checkbox."];
				alert["You can select maximum of " + limit + " checkbox."];
				this.checked = false;
			}
		}
	}
}



	onlyOneCheckBox[]

Chỉ cần sao chép/dán mã này vào nút trang tùy chỉnh như hiện tại

Và sửa đổi nó khi cần thiết. Có 2 comment hướng dẫn bạn. Làm cho quá trình hoàn toàn đơn giản

Đây là bản demo hoạt động. https. //kiểm tra2. móc chì. io/khảo sát/ipos2BvlCurHDMqlx9aMR5vAGxZ2MBbcreCHZ6jv

Hướng dẫn này chỉ ra cách giới hạn số lượng lựa chọn hộp kiểm bằng JavaScript trong một nhóm hộp kiểm. Giả sử bạn có một nhóm hộp kiểm trong biểu mẫu hoặc trong div hoặc ô bảng hoặc bất kỳ nơi nào khác và bạn có yêu cầu người dùng có thể chọn tối đa hai hoặc ba hoặc n số hộp kiểm thì bạn cần hạn chế nó bằng cách sử dụng javascript hoặc . Ví dụ dưới đây cho thấy cách đạt được nó bằng JavaScript

điều kiện tiên quyết

Kiến thức về Javascript

Giới hạn lựa chọn hộp kiểm bằng JavaScript

Tôi sẽ chỉ cho bạn ở đây hai cách tiếp cận về cách giới hạn số lượng lựa chọn hộp kiểm bằng JavaScript – sử dụng biểu mẫu và sử dụng div

Sử dụng biểu mẫu

Ví dụ dưới đây cho thấy số lượng tối đa hai hộp kiểm có thể được chọn. Các hộp kiểm được đặt bên trong một biểu mẫu HTML

HTML

Trong mã nguồn bên dưới, tôi đã thêm ba hộp kiểm vào biểu mẫu và tôi sẽ cho phép người dùng chỉ chọn hai hộp kiểm trong số ba hộp kiểm

Lưu ý cách tôi đặt tên cho mỗi hộp kiểm bằng một mảng. Các đoạn mã dưới đây nên được đặt bên trong nội dung HTML

Using Form

	
	
	

checkBoxLimit[]

JavaScript

Mã nguồn bên dưới được sử dụng để giới hạn lựa chọn hộp kiểm bằng JavaScript ở dạng html ở trên. Tôi ghi đầu ra vào bảng điều khiển cũng như hiển thị thông báo cảnh báo cho người dùng cuối

Đặt các đoạn mã dưới đây dưới thẻ HTML

function checkBoxLimit[] {
	var checkBoxGroup = document.forms['form_name']['check[]'];			
	var limit = 2;
	for [var i = 0; i < checkBoxGroup.length; i++] {
		checkBoxGroup[i]. title = function[] {
			var checkedcount = 0;
			for [var i = 0; i < checkBoxGroup.length; i++] {
				checkedcount += [checkBoxGroup[i].checked] ? 1 : 0;
			}
			if [checkedcount > limit] {
				console.log["You can select maximum of " + limit + " checkboxes."];
				alert["You can select maximum of " + limit + " checkboxes."];						
				this.checked = false;
			}
		}
	}
}

Sử dụng Div

Bạn có thể đặt các hộp kiểm trong bất kỳ thẻ nào bằng thuộc tính id. Ví dụ dưới đây cho thấy chỉ có thể chọn một hộp kiểm

HTML

Ở đây trong mã nguồn bên dưới, tôi đã thêm ba hộp kiểm và chỉ một hộp kiểm sẽ được chọn

Tôi đã đặt các hộp kiểm bên trong HTML

Using Div

	
	
	


	onlyOneCheckBox[]

function onlyOneCheckBox[] {
	var checkboxgroup = document.getElementById['checkboxgroup'].getElementsByTagName["input"];
	var limit = 1;
	for [var i = 0; i < checkboxgroup.length; i++] {
		checkboxgroup[i]. title = function[] {
			var checkedcount = 0;
				for [var i = 0; i < checkboxgroup.length; i++] {
				checkedcount += [checkboxgroup[i].checked] ? 1 : 0;
			}
			if [checkedcount > limit] {
				console.log["You can select maximum of " + limit + " checkbox."];
				alert["You can select maximum of " + limit + " checkbox."];
				this.checked = false;
			}
		}
	}
}