sử dụng jQuery để nhận giá trị của các hộp kiểm đã chọn

Question 1

Tôi muốn lặp qua nhóm hộp kiểm 'locationthemes' và tạo một chuỗi với tất cả các giá trị đã chọn. Vì vậy, khi hộp kiểm 2 và 4 được chọn, kết quả sẽ là: "3,8"

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

Tôi đã kiểm tra ở đây: http://api.jquery.com/checked-selector/ nhưng không có ví dụ nào về cách chọn nhóm hộp kiểm theo tên của nó.

Tôi có thể làm cái này như thế nào?

Question 2

Trong jQuery, chỉ cần sử dụng một bộ chọn thuộc tính như

$('input[name="locationthemes"]:checked');

để chọn tất cả các đầu vào đã kiểm tra với tên "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Bản giới thiệu

Trong VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Bản giới thiệu

Trong ES6 / toán tử spread

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Bản giới thiệu

Question 3

$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

Demo làm việc

HOẶC LÀ

Sử dụng is()hàm của jQuery :

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

Các bác sĩ cho biết:

Question 4

Ánh xạ mảng là nhanh nhất và rõ ràng nhất.

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

sẽ trả về các giá trị dưới dạng một mảng như:

array => [2,3]

giả sử lâu đài và nhà kho đã được kiểm tra còn những cái khác thì không.

Question 5

Sử dụng maphàm của jquery

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});

Question 6

$("#locationthemes").prop("checked")

Question 7

You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();

Question 8

Vì vậy, tất cả trong một dòng:

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

.. một lưu ý về bộ chọn [id*="checkbox"], nó sẽ lấy bất kỳ mục nào có chuỗi "hộp kiểm" trong đó. Hơi vụng về ở đây, nhưng thực sự tốt nếu bạn đang cố gắng kéo các giá trị đã chọn ra khỏi thứ gì đó như .NET CheckBoxList. Trong trường hợp đó, "hộp kiểm" sẽ là tên mà bạn đã cấp quyền kiểm soát CheckBoxList.

Question 9

var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});

Question 10

var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});

Question 11

Nguồn - Chi tiết hơn

Nhận giá trị hộp kiểm đã chọn bằng jQuery

Sau đó, chúng tôi viết tập lệnh jQuery để nhận giá trị hộp kiểm đã chọn trong một mảng bằng cách sử dụng jQuery each (). Sử dụng hàm jQuery này, nó sẽ chạy một vòng lặp để lấy giá trị đã kiểm tra và đưa nó vào một mảng.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Get Selected Checkboxes Value Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn").click(function() {
                var locationthemes = [];
                $.each($("input[name='locationthemes']:checked"), function() {
                    locationthemes.push($(this).val());
                });
                alert("My location themes colors are: " + locationthemes.join(", "));
            });
        });
    </script>
    </head>
    <body>
        <form method="POST">
        <h3>Select your location themes:</h3>
        <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
        <label for="checkbox-1">Castle</label>
        <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
        <label for="checkbox-2">Barn</label>
        <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
        <label for="checkbox-3">Restaurant</label>
        <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
        <label for="checkbox-4">Bar</label>
        <br>
        <button type="button" class="btn">Get Values</button>
    </form>
    </body>
    </html>

Question 12

Jquery 3.3.1, nhận giá trị cho tất cả các hộp kiểm đã chọn khi nhấp vào nút

$(document).ready(function(){
 $(".btn-submit").click(function(){
  $('.cbCheck:checkbox:checked').each(function(){
	alert($(this).val())
  });
 });			
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1"  class="cbCheck" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2"  class="cbCheck" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3"  class="cbCheck" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit" class="btn-submit">

Mở rộng đoạn mã

Question 13

Một cách hiện đại hơn để làm điều đó:

const selectedValues = $('input[name="locationthemes"]:checked').map( function () { 
        return $(this).val(); 
    })
    .get()
    .join(', ');

Trước tiên, chúng tôi tìm tất cả các hộp kiểm đã chọn với tên đã cho, sau đó bản đồ của jQuery () lặp qua từng hộp kiểm, gọi lệnh gọi lại trên đó để nhận giá trị và trả về kết quả là một bộ sưu tập jQuery mới hiện chứa các giá trị hộp kiểm. Sau đó, chúng tôi gọi get () trên nó để nhận một mảng giá trị, rồi tham gia () để nối chúng thành một chuỗi duy nhất - sau đó được gán cho hằng số selectValues.