Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Khách hàng đã cung cấp cho tôi một thiết kế có menu chọn chọn có chứa hộp kiểm cùng với tên mục dưới dạng các mục riêng lẻ trong danh sách. Có thể có thể thêm hộp kiểm bên trong menu chọn chọn không?

NB: Nhà phát triển cần thêm ID của riêng mình để làm cho menu hiệu quả, tôi chỉ cần mã HTML CSS nếu có thể.

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Tylerh

Huy hiệu vàng 20.4K6060 gold badges75 silver badges94 bronze badges

hỏi ngày 18 tháng 7 năm 2013 lúc 4:46Jul 18, 2013 at 4:46

5

Bạn không thể đặt hộp kiểm bên trong phần tử chọn nhưng bạn có thể nhận được chức năng tương tự bằng cách sử dụng HTML, CSS và JavaScript. Đây là một giải pháp làm việc có thể. Giải thích sau đây.

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?


Mã số:

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

Explanation:

Lúc đầu, chúng tôi tạo một phần tử chọn hiển thị văn bản "Chọn một tùy chọn" và phần tử trống bao gồm (sự chồng chéo) phần tử chọn (

3). Chúng tôi không muốn người dùng nhấp vào phần tử chọn - nó sẽ hiển thị một tùy chọn trống. Để chồng chéo phần tử với phần tử khác, chúng tôi sử dụng thuộc tính vị trí CSS với giá trị tương đối | Tuyệt đối.

Để thêm chức năng, chúng tôi chỉ định chức năng JavaScript được gọi khi người dùng nhấp vào DIV chứa phần tử chọn của chúng tôi (

4).

Chúng tôi cũng tạo Div chứa các hộp kiểm của chúng tôi và kiểu nó bằng CSS. Hàm JavaScript đã đề cập ở trên chỉ thay đổi giá trị

5 của thuộc tính hiển thị CSS từ "Không" thành "Chặn" và ngược lại.

Giải pháp đã được kiểm tra trong các trình duyệt sau: Internet Explorer 10, Firefox 34, Chrome 39. Trình duyệt cần bật JavaScript.


Thêm thông tin:

Định vị CSS

Cách phủ một div trên div khác

http://www.w3schools.com/css/css_positioning.asp

CSS hiển thị thuộc tính

http://www.w3schools.com/cssref/pr_class_display.asp

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Đã trả lời ngày 18 tháng 12 năm 2014 lúc 12:50Dec 18, 2014 at 12:50

Vitfovitfovitfo

9.3216 Huy hiệu vàng29 Huy hiệu bạc 30 Huy hiệu Đồng6 gold badges29 silver badges30 bronze badges

13

Plugin tốt nhất cho đến nay là Bootstrap Multisect

EDIT: Tôi đã viết điều này từ rất lâu rồi. Tôi sẽ không khuyên bạn nên sử dụng jQuery nữa. Bạn nên học một khung phản ứng như Vue.js, React hoặc Angular nơi bạn có nhiều mô -đun để lựa chọn. Tôi chắc chắn bạn sẽ tìm thấy những gì bạn cần. Tôi đã tìm thấy cái này ví dụ từ một tìm kiếm nhanh trên google. I wrote this a very long time ago. I would not recommend using jQuery anymore. You should rather learn a reactive framework like Vue.js, React, or Angular where you have plenty of modules to choose from. I'm sure you'll find what you need. I found this one for instance from a quick Google search.




jQuery Multi Select Dropdown with Checkboxes














Đây là bản demo:

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});
.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}








Đã trả lời ngày 20 tháng 8 năm 2014 lúc 21:42Aug 20, 2014 at 21:42

PMROTULEPMROTULEpmrotule

8.3753 Huy hiệu vàng45 Huy hiệu bạc57 Huy hiệu Đồng3 gold badges45 silver badges57 bronze badges

7

Đối với cách tiếp cận CSS thuần túy, bạn có thể sử dụng bộ chọn

6 kết hợp với bộ chọn
7 để nội dung có điều kiện.Pure CSS approach, you can use the
6 selector combined with the
7 selector to inline conditional content.

Chỉ cần thêm lớp

8 vào phần tử
9 của bạn và bao gồm các CSS sau:

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

Bạn có thể sử dụng các ký tự unicode cũ đơn giản (với mã hóa hex thoát ra) như sau:

  • Hộp bỏ phiếu -
    
    
    
    jQuery Multi Select Dropdown with Checkboxes
    
    
    
    
    
    
    
    
    
    
    
    
    


    0
  • Hộp bỏ phiếu với séc -
    
    
    
    jQuery Multi Select Dropdown with Checkboxes
    
    
    
    
    
    
    
    
    
    
    
    
    


    1

Hoặc nếu bạn muốn gia vị mọi thứ, bạn có thể sử dụng những glyphs fontawgoes này

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Bản demo trong đoạn trích JSfiddle & Stack

Lưu ý: Tuy nhiên, hãy cẩn thận với các vấn đề tương thích IE: Beware of IE compatibility issues however

Đã trả lời ngày 13 tháng 2 năm 2018 lúc 21:34Feb 13, 2018 at 21:34

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Kylemit ♦ KylemitKyleMit

35K61 Huy hiệu vàng433 Huy hiệu bạc626 Huy hiệu đồng61 gold badges433 silver badges626 bronze badges

6

Hãy thử nhiều lựa chọn, đặc biệt là nhiều mục. Có vẻ là giải pháp sạch sẽ và được quản lý, với hàng tấn ví dụ. Bạn cũng có thể xem nguồn.

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Đã trả lời ngày 11 tháng 4 năm 2015 lúc 1:55Apr 11, 2015 at 1:55

Azghanviaz AfghanistanviAzghanvi

89510 Huy hiệu bạc19 Huy hiệu đồng10 silver badges19 bronze badges

0

Phiên bản Vanilla JS thay thế với nhấp chuột bên ngoài để ẩn các hộp kiểm:

let expanded = false;
const multiSelect = document.querySelector('.multiselect');

multiSelect.addEventListener('click', function(e) {
  const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
  e.stopPropagation();
}, true)

document.addEventListener('click', function(e){
  if (expanded) {
    checkboxes.style.display = "none";
    expanded = false;
  }
}, false)

Tôi đang sử dụng AddEventListener thay vì onclick để tận dụng các tùy chọn pha bắt/sủi bọt cùng với stopPropagation (). Bạn có thể đọc thêm về việc bắt/sủi bọt tại đây: https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener

Phần còn lại của mã phù hợp với câu trả lời ban đầu của Vitfo (nhưng không cần onclick () trong HTML). Một vài người đã yêu cầu chức năng này sans jQuery.

Đây là ví dụ codepen https://codepen.io/davidysoards/pen/qxyyya?editors=1010

Đã trả lời ngày 11 tháng 7 năm 2019 lúc 12:21Jul 11, 2019 at 12:21

Tôi đã bắt đầu từ câu trả lời của @vitfo nhưng tôi muốn có




jQuery Multi Select Dropdown with Checkboxes














2 bên trong



jQuery Multi Select Dropdown with Checkboxes














3 thay vì đầu vào hộp kiểm để tôi kết hợp tất cả các câu trả lời để thực hiện điều này, có mã của tôi, tôi hy vọng nó sẽ giúp ai đó.

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
0
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
1
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
2

Đã trả lời ngày 8 tháng 4 năm 2019 lúc 16:24Apr 8, 2019 at 16:24

PavelBerepavelBerepavelbere

9649 Huy hiệu bạc21 Huy hiệu đồng9 silver badges21 bronze badges

Sử dụng mã này cho danh sách hộp kiểm trên menu tùy chọn.

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
3
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
4

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Kylemit ♦

35K61 Huy hiệu vàng433 Huy hiệu bạc626 Huy hiệu đồng61 gold badges433 silver badges626 bronze badges

Hãy thử nhiều lựa chọn, đặc biệt là nhiều mục. Có vẻ là giải pháp sạch sẽ và được quản lý, với hàng tấn ví dụ. Bạn cũng có thể xem nguồn.Oct 31, 2017 at 7:14

2

Đã trả lời ngày 11 tháng 4 năm 2015 lúc 1:55

Azghanviaz Afghanistanvi

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
5

89510 Huy hiệu bạc19 Huy hiệu đồng

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
6

Phiên bản Vanilla JS thay thế với nhấp chuột bên ngoài để ẩn các hộp kiểm:Apr 5, 2018 at 5:15

Bạn có thể đang tải tệp multiselect.js trước khi danh sách tùy chọn được cập nhật với AJAX CALL Vì vậy, trong khi thực hiện tệp multiselect.js có danh sách tùy chọn trống có để áp dụng chức năng đa dạng. Vì vậy, trước tiên, hãy cập nhật danh sách tùy chọn bằng cách gọi AJAX sau đó bắt đầu cuộc gọi MultiSelect, bạn sẽ nhận được danh sách thả xuống với danh sách tùy chọn động.

Hy vọng rằng cái này sẽ giúp đc bạn.

Danh sách thả xuống MultiSelect và các tệp JS & CSS liên quan

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
7
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
8

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

ánh sáng rõ ràng

11.7K11 Huy hiệu vàng53 Huy hiệu bạc74 Huy hiệu đồng11 gold badges53 silver badges74 bronze badges

Đã trả lời ngày 18 tháng 8 năm 2016 lúc 13:56Aug 18, 2016 at 13:56

0

Bạn có thể thử Bootstrap-Select. Nó cũng có một tìm kiếm trực tiếp!

Đã trả lời ngày 26 tháng 12 năm 2019 lúc 9:17Dec 26, 2019 at 9:17

Saeesaeesaee

4151 Huy hiệu vàng3 Huy hiệu bạc15 Huy hiệu đồng1 gold badge3 silver badges15 bronze badges

Nếu bạn muốn tạo nhiều lần thả xuống chọn trong cùng một trang:

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
9

Html:

0

Sử dụng jQuery:

1

Đã trả lời ngày 25 tháng 10 năm 2019 lúc 6:05Oct 25, 2019 at 6:05

AshishashishAshish

991 Huy hiệu bạc11 Huy hiệu đồng1 silver badge11 bronze badges

Chỉ thêm lớp tạo div và thêm kiểm soát biểu mẫu lớp. iam Sử dụng JSP, BOOSTRAP4. Bỏ qua C: ForEach.

2

Đã trả lời ngày 7 tháng 9 năm 2019 lúc 18:21Sep 7, 2019 at 18:21

Hướng dẫn how can use checkbox inside select option in html? - cách sử dụng hộp kiểm bên trong tùy chọn chọn trong html?

Làm thế nào để chọn tất cả các hộp kiểm hoạt động?

Hộp kiểm Chọn tất cả chỉ hoạt động khi các hộp kiểm không được chọn. Nói cách khác, một khi người dùng chọn một hoặc nhiều hộp kiểm thì chọn chính tất cả các hộp kiểm sẽ không hoạt động.only works when the checkboxes are unselected. In other words, once a user selects one or more of the checkboxes then the main select all checkbox won't work.

Hộp kiểm có cho phép nhiều lựa chọn không?

MultiSelect có hỗ trợ tích hợp để chọn nhiều giá trị thông qua hộp kiểm, khi thuộc tính chế độ được đặt làm hộp kiểm. .