Cách truy xuất các giá trị hộp kiểm trong jQuery

240

Làm cách nào để sử dụng jQuery để lấy các giá trị hộp kiểm tra và đặt nó vào trong vùng văn bản ngay lập tức?

Cũng giống như mã này:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Nếu id="c_d"được cập nhật bởi Ajax , mã bên dưới của altCognito sẽ không hoạt động. Có giải pháp nào tốt không?

jquery html checkbox

— lanqy
nguồn

bạn muốn tất cả hay từng cái một?

— TStamper

Làm thế nào chúng ta có thể 'kiểm tra' hộp với một giá trị / nhãn nhất định? nói "one_name2"?

— Amitd

5

@Amitd sử dụng $ ("input [name = one_name2]"). Attr ('đã kiểm tra', true);

— Mark Schultheiss

cảm ơn đã làm việc tốt đẹp..even cho loại radio. 1 phiếu bầu lên :)

— Amitd

320

Đây là một trong những hoạt động ( xem ví dụ ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Cập nhật

Một số tháng sau đó, một câu hỏi khác được đặt ra liên quan đến cách giữ cho các hoạt động trên nếu ID thay đổi. Chà, giải pháp tập trung vào việc ánh xạ hàm updateTextArea thành một cái gì đó chung chung sử dụng các lớp CSS và sử dụng hàm trực tiếp để theo dõi DOM cho những thay đổi đó.

— cgp
nguồn

2

À ha! Thông minh. Bạn đã tính đến cả hai tình huống có thể xảy ra. Làm tốt lắm thưa ông. ;)

— KyleFarris

Làm thế nào chúng ta có thể 'kiểm tra' hộp với một giá trị / nhãn nhất định? nói "one_name2"?

— Amitd

6

Tôi thích sử dụng bản đồ cho những thứ như thế này: $ (': đã kiểm tra', '#c_b'). Map (hàm (i, cb) {return cb.value}) .get (). Ngoài ra, đây chỉ là sở thích cá nhân, nhưng tôi sẽ tách riêng việc lấy các giá trị khỏi thay đổi vùng văn bản, đại loại như: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val ($ (': đã kiểm tra', '#c_b'). map (hàm (i, cb) {return cb.value}) .get ())); $ ('# c_b đầu vào: đầu tiên'). nhấp chuột'); });

— Brandon

sử dụng $(document).on("click", "#c_b input", updateTextArea);thay thế để giải quyết các vấn đề của ajax'y.

— Goldentoa11

1

không chắc chắn nếu đây chỉ là trong IE (11), nhưng không nên $('#c_b:checked')(nhấn mạnh vào khoảng cách)?

— AceMark

124

Bạn cũng có thể trả về tất cả các giá trị hộp kiểm đã chọn trong chuỗi được phân tách bằng dấu phẩy. Điều này cũng sẽ giúp bạn dễ dàng hơn khi bạn gửi nó dưới dạng tham số tới SQL

Dưới đây là một mẫu trả về tất cả các giá trị hộp kiểm đã chọn có tên "chkboxName" trong chuỗi dấu phẩy riêng biệt

Và đây là javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Đây là mẫu HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

— Mohamed ElSheikh
nguồn

Tôi chỉ vấp phải điều này trong khi tìm cách để có được tất cả các giá trị của các hộp kiểm tra của một tên cụ thể và nó hoạt động với tôi với hai vấn đề nhỏ. 1) mỗi lần tôi đánh dấu vào ô khác với ô đầu tiên, nó sẽ đánh dấu vào ô đầu tiên. 2) Khi tôi cố gắng thiết lập điều này thành một mảng để tôi có thể truy cập thông tin sau đó, nó sẽ gặp sự cố.

— Hoàn nguyên bong bóng

3

Đây thực sự là câu trả lời tốt nhất. Rất đơn giản. Tôi sẽ loại bỏ "chức năng" và "cảnh báo" vì điều đó làm cho một số người bối rối, nhưng mã này đơn giản, được thực hiện tốt.

— tmarois

showSelectedValues cũng hoạt động để giải mã các nhóm nút radio có cùng tên

— Matthew Lock

65

Câu hỏi của bạn khá mơ hồ nhưng tôi nghĩ đây là những gì bạn cần:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Chỉnh sửa: Ồ, được rồi .. bạn đi đây ... Bạn chưa có HTML trước đó. Dù sao, vâng, tôi nghĩ rằng bạn có nghĩa là đặt giá trị trong một vùng văn bản khi nó được nhấp vào. Nếu bạn muốn các giá trị của các hộp kiểm tra được đưa vào textarea (có thể có dấu phẩy đẹp) khi tải trang, nó sẽ đơn giản như:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Chỉnh sửa 2 Như mọi người đã làm, bạn cũng có thể làm điều này để tắt bộ chọn dài mà tôi đã viết:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Tôi hoàn toàn quên mất lối tắt đó. ;)

— KyleFarris
nguồn

50

Điều này hoạt động hoàn hảo cho tôi:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Cảm ơn Mohamed ElSheikh

— Nic
nguồn

1

người đàn ông tuyệt vời ... đây là người duy nhất làm việc cho vòng lặp ajax của tôi;) cảm ơn

— Sagive SEO

7

cũng có thể $ ('input [name =

— select

8

Cảm ơn altCognito, giải pháp của bạn đã giúp. Chúng tôi cũng có thể làm điều này bằng cách sử dụng tên của các hộp kiểm:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

— Harpreet Bhatia
nguồn

6

Những điều sau đây có thể hữu ích vì tôi đến đây để tìm kiếm một giải pháp hơi khác. Tập lệnh của tôi cần tự động lặp qua các phần tử đầu vào và phải trả về giá trị của chúng (đối với hàm jQuery.post ()), vấn đề là với các hộp kiểm trả về giá trị của chúng bất kể trạng thái đã kiểm tra. Đây là giải pháp của tôi:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Sử dụng:

jQuery(".element").input_val();

Nếu trường đầu vào đã cho là một hộp kiểm, hàm input_val chỉ trả về một giá trị nếu được chọn. Đối với tất cả các yếu tố khác, giá trị được trả về bất kể trạng thái được kiểm tra.

— Andy
nguồn

nó thực sự hoạt động tốt, cảm ơn rất nhiều ... Tôi vừa thay đổi "return jQuery (this) .val ();" để "trả lại sự thật;" bởi vì đó là một hộp kiểm trong trường hợp của tôi, tôi chỉ cần biết nó đã được kiểm tra hay chưa .. cảm ơn!

— TCB13

5

Đây là một thay thế trong trường hợp bạn cần lưu giá trị vào một biến:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () trả về một mảng, mà tôi thấy đẹp hơn văn bản trong textarea).

— pgcd
nguồn

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

Bạn đã quá phức tạp. Ngoài ra, bạn thường không đặt giá trị của một vùng văn bản với tham số giá trị - giá trị của hộp văn bản là bên trongHTML. Và nếu bạn định đặt giá trị của một số phần tử, thông thường tốt nhất là sử dụng phương thức 'val ()' cho mục đích trừu tượng hóa trình duyệt.

— KyleFarris

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

— satoru
nguồn

2

$("#t").text($("#cb").find(":checked").val())

— mkoryak
nguồn

1

Nhiều hộp kiểm tra có thể được kiểm tra cùng một lúc.

— KyleFarris

2

Dù sao, bạn có thể cần một cái gì đó như thế này:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Điều này sẽ nhận được giá trị của hộp kiểm tra đầu tiên trên trang và chèn nó vào trong vùng văn bản với id='textarea'.

Lưu ý rằng trong mã ví dụ của bạn, bạn nên đặt các hộp kiểm ở dạng.

— Pim Jager
nguồn

2

Điều này là sai, istrả về giá trị boolean, giá trị boolean không có valphương thức.

— không xác định

2

Một cách dễ dàng và ngắn gọn hơn nhiều mà tôi đang sử dụng để thực hiện tương tự, sử dụng câu trả lời từ một bài đăng khác, là như thế này:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Ban đầu các thành phố được lấy từ cơ sở dữ liệu MySQL và được lặp trong PHP while loop:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Bây giờ, bằng cách sử dụng mã jQuery ở trên, tôi nhận được tất cả các giá trị city_id và gửi lại cơ sở dữ liệu bằng $ .get (...)

Điều này đã làm cho cuộc sống của tôi trở nên dễ dàng kể từ bây giờ mã hoàn toàn năng động. Để thêm nhiều thành phố hơn, tất cả những gì tôi cần làm là thêm nhiều thành phố hơn trong cơ sở dữ liệu của mình và không phải lo lắng về kết thúc PHP hoặc jQuery.

— zeeshan
nguồn

0

Tôi đã có một vấn đề tương tự và đây là cách tôi giải quyết nó bằng các ví dụ trên:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

— sam
nguồn

0

Hãy thử cái này ..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

— sonida
nguồn

0

Nếu bạn muốn chèn giá trị của bất kỳ hộp kiểm nào ngay lập tức vì nó đang được kiểm tra thì điều này sẽ phù hợp với bạn:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

— duckyflip
nguồn

Không chiếm nhiều giá trị và bỏ chọn các hộp kiểm

— Rob