hộp kiểm jquery đã chọn


479

Tôi đã thử tất cả các cách có thể, nhưng tôi vẫn không làm cho nó hoạt động. Tôi có một cửa sổ phương thức với một checkboxtôi muốn rằng khi phương thức mở ra, việc checkboxkiểm tra hoặc bỏ chọn phải dựa trên giá trị cơ sở dữ liệu. (Tôi đã làm việc với các trường mẫu khác.) Tôi bắt đầu thử kiểm tra nhưng nó không hoạt động.

Div html của tôi:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

và câu đố:

$("#estado_cat").prop( "checked", true );

Tôi cũng đã thử với attr, và những người khác thấy ở đây trong các diễn đàn, nhưng dường như không có gì hoạt động. Ai đó có thể chỉ cho tôi đúng cách?

EDIT: ok, tôi thực sự đang thiếu một cái gì đó ở đây ... Tôi có thể kiểm tra / bỏ chọn bằng cách sử dụng mã nếu hộp kiểm nằm trong trang, nhưng nó có trong cửa sổ phương thức không, tôi không thể. Tôi đã thử hàng tá cách khác nhau ...

Tôi có một liên kết được cho là để mở phương thức:

và jquery để "lắng nghe" nhấp chuột và thực hiện một số thao tác như điền vào một số hộp văn bản với dữ liệu đến từ cơ sở dữ liệu. Mọi thứ hoạt động như tôi muốn nhưng vấn đề là tôi không thể đặt hộp kiểm được chọn / bỏ chọn bằng mã. xin vui lòng giúp đỡ!

$(function() {
 $(".editButton").click(function(){
       var id = $(this).data('id'); 
       $.ajax({
          type: "POST",
          url: "process.php",
          dataType:"json",
          data: { id: id, op: "edit" },
        }).done(function( data ) {
//the next two lines work fine, i.e., it grabs the value from database and fills the textboxes
          $("#nome_categoria").val( data['nome_categoria'] );
          $("#descricao_categoria").val( data['descricao_categoria'] );
//then I tried to set the checkbox checked (because its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});

Lớp nào được áp dụng trên div phương thức khi phương thức mở? Ngoài ra, làm thế nào để bạn kiểm tra giá trị cơ sở dữ liệu - Sử dụng AJAX hoặc nó đã được tìm nạp trước và được lưu trữ trong một biến?
dùng1428716

Đặt hộp kiểm sau khi tải cửa sổ phương thức Tôi nghĩ rằng bạn đang đặt hộp kiểm trước khi tải cửa sổ phương thức. $ ('# fModal'). phương thức ('hiển thị'); $ ("# estado_cat"). attr ("đã kiểm tra", "đã kiểm tra");
Vineeth Bhaskaran

Câu trả lời:


805

bạn phải sử dụng chức năng 'prop':

.prop('checked', true);

Trước jQuery 1.6 (xem câu trả lời của người dùng 2063626 ):

.attr('checked','checked')

5
Bạn dường như có câu trả lời chính xác. Bạn có thể giải thích? stackoverflow.com/a/5876747/29182
Ziggy

1
Điều này là tốt để biết. Đã bỏ qua điều này khi xem qua tài liệu di chuyển của jQuery 3.3.x
reaper_unique

1
Điều tốt để biết rằng bạn không thể sử dụng attr trong các phiên bản mới hơn của jQuery như tôi nghĩ ban đầu
Kaloyan

75

Lấy tất cả các câu trả lời được đề xuất và áp dụng chúng cho tình huống của tôi - cố gắng kiểm tra hoặc bỏ chọn hộp kiểm dựa trên giá trị được truy xuất là đúng (nên chọn hộp) hoặc sai (không nên chọn hộp) - Tôi đã thử tất cả các cách trên và thấy rằng sử dụng .prop ("đã kiểm tra", đúng).prop ("đã kiểm tra", sai ) là giải pháp chính xác.

Tôi chưa thể thêm nhận xét hoặc trả lời, nhưng tôi cảm thấy điều này đủ quan trọng để thêm vào cuộc trò chuyện.

Đây là mã thủ công cho một sửa đổi fullcalWiki cho biết nếu giá trị được truy xuất "allDay" là đúng, thì hãy chọn hộp kiểm có ID "thậm chí_allday_yn":

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}

48
Tại sao không chỉ trên một dòng duy nhất? $( "#even_allday_yn").prop('checked', allDay);
Xavier Hayoz

3
Ông đã cố gắng chứng minh các giá trị có thể. Làm thế nào bạn biết được giá trị thực của "allDay" mà không có ví dụ như thế này ở đây?
Soroush Falahati

1
@Xavier Hayoz. Điều này hoạt động nếu và chỉ khi, allDay trả về 'true' hoặc 'false' dưới dạng giá trị rác - không phải là giá trị nhị phân thuần túy. Các hộp kiểm tra được thiết kế tồi trong html và trạng thái đã kiểm tra của chúng có thể được thể hiện theo những cách rất khác nhau. An toàn và duy nhất một cách tôi biết là: allDay === 'true'? $ ('# thậm chí_allday_yn) .prop ("đã kiểm tra", đúng): $ (' # thậm chí_allday_yn) .prop ("đã kiểm tra", sai). Thông báo các toán tử bình đẳng nghiêm ngặt.
Brice Coustillas

1
$('#even_allday_yn').prop('checked', allDay === true)sẽ làm việc vì allDay === truecho một kết quả boolean.
leftclickben

58

Anh chàng thử mã dưới đây:

$("div.row-form input[type='checkbox']").attr('checked','checked')

HOẶC LÀ

$("div.row-form #estado_cat").attr("checked","checked");

HOẶC LÀ

$("div.row-form #estado_cat").attr("checked",true);

26
Như trong câu trả lời của KeyOfJ, hãy sử dụng .prop('checked', true)thay vì attr- Tôi chỉ gặp vấn đề tương tự và prophoạt động.
semmelbroesel

3
FYI nếu bạn muốn sử dụng :checkedbộ chọn giả hoặc các tính năng HTML của hộp kiểm riêng khác, bạn phải sử dụng .prop.
benastan

1
Đã thử điều này và nó không hoạt động nhưng khi tôi thay đổi mã thành $ ("div.row-form #estado_cat"). Prop ("đã kiểm tra", "đã kiểm tra"); nó đã làm việc (Thay đổi attr thành prop).
Jim Evans

1
Thật không may, prop là jQuery 1.6 trở lên, vì vậy nếu bạn bị mắc kẹt trong một khung kế thừa không phù hợp với bạn
wolffer-East 16/1/2015

.attr()là cách để đi cho các phiên bản trước, .prop()cho jQuery 1.6+.
vapcguy

26

"Đã kiểm tra" thuộc tính 'đánh dấu vào hộp kiểm ngay khi nó tồn tại. Vì vậy, để kiểm tra / bỏ chọn hộp kiểm, bạn phải đặt / bỏ đặt thuộc tính.

Để kiểm tra hộp:

$('#myCheckbox').attr('checked', 'checked');

Để bỏ chọn hộp:

$('#myCheckbox').removeAttr('checked');

Để kiểm tra trạng thái đã kiểm tra:

if ($('#myCheckbox').is(':checked'))

Hy vọng nó giúp...


19

Vì bạn đang ở trong một cửa sổ phương thức (dù là động hay trong trang), bạn có thể sử dụng mã sau đây để thực hiện mục tiêu của mình: (Tôi gặp vấn đề tương tự trên trang web của mình và đây là cách tôi khắc phục nó)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

MÃ:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

Trong "kendoWindow" ở trên là cửa sổ của tôi (của tôi là động, nhưng tôi cũng làm điều này khi gắn thêm một phần tử trực tiếp vào trang). Tôi đang lặp qua một mảng dữ liệu ("queryToAddTogroup") để xem liệu có hàng nào có thuộc tính của COPY không. Nếu vậy tôi muốn bật hộp kiểm trong cửa sổ đặt thuộc tính đó khi người dùng lưu từ cửa sổ này.


4
Cần lưu ý rằng mặc dù các câu trả lời khác cho câu hỏi có thể "hoạt động", nhưng sử dụng propnhư câu trả lời này gợi ý là cách ĐÚNG để thực hiện kiểm tra / bỏ chọn hộp kiểm jQuery động.
Joshua Burns

11
.attr("checked",true)
.attr("checked",false)

sẽ hoạt động. Hãy chắc chắn đúng và sai không nằm trong dấu ngoặc kép.


1
Attr sẽ không kiểm tra hộp kiểm, prop là người thực hiện kiểm tra. Thích .prop('checked', true); thêm thông tin trong bài này
casivaagustin

@casivaagustin Phụ thuộc vào phiên bản jQuery. Tôi tin rằng sớm hơn jQuery 1.6, .attr()đã làm việc, như được mô tả.
vapcguy

5

Bạn có thể viết như dưới đây cho mã.

HTML

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

Hy vọng nó làm việc cho bạn.


4

Nếu bạn muốn sử dụng chức năng này cho tập lệnh GreasMonkey để tự động kiểm tra hộp kiểm trên một trang, hãy nhớ rằng chỉ cần đặt thuộc tính được kiểm tra có thể không kích hoạt hành động liên quan. Trong trường hợp đó, "nhấp vào" hộp kiểm có thể sẽ (và cũng đặt thuộc tính được chọn).

$("#id").click()

3
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Tìm sẽ trả về mảng, vì vậy sử dụng [0] để nhận ngay cả khi chỉ có một mục

nếu bạn không sử dụng thì tìm

$("#subclip_checkbox").checked=true;

này làm việc tốt trong Mozilla Firefox cho tôi


1
Điều này hoạt động, tất cả các giải pháp khác không được phát hiện nếu bạn có: kiểu được kiểm tra trong css của bạn
bhappy


2

Hãy thử điều này vì có thể bạn đang sử dụng Giao diện người dùng jQuery (nếu không vui lòng nhận xét)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });

@ user2063626 - một phần của js bên trong chức năng được sao chép từ câu trả lời của bạn
user1428716

2

Bạn đã thử chạy $("#estado_cat").checkboxradio("refresh")trên hộp kiểm của bạn?


2

Những công việc này.

 $("div.row-form input[type='checkbox']").attr('checked','checked');

2

Tôi cũng gặp phải vấn đề này

và đây là mã làm việc cũ của tôi

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

đây là mã mới của tôi hiện đang hoạt động:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

vì vậy, điểm quan trọng là trước khi nó hoạt động, đảm bảo thuộc tính đã kiểm tra tồn tại và không bị xóa.


Đơn giản hơn nhiều:Jbookaccess.prop("checked", data.access != 'private');
Legionar

2

Điều này xảy ra bởi vì bạn với phiên bản mới nhất của jquery attr('checked')trả về 'checked'trong khi prop('checked')trả về true.


2
<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>

cái này hoạt động tốt trong chrome và firefox
reza akhlaghi

1

Đặt hộp kiểm sau khi tải cửa sổ phương thức. Tôi nghĩ rằng bạn đang đặt hộp kiểm trước khi tải trang.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");

1

Tôi biết điều này yêu cầu một giải pháp Jquery, nhưng tôi chỉ cho rằng tôi rất dễ dàng chuyển đổi nó trong javascript đơn giản.

var element = document.getElementById("estado_cat");
element.checked = 1;

Nó sẽ hoạt động trong tất cả các phiên bản hiện tại và tương lai.


0
<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

Nhớ tăng id và cho thuộc tính tương ứng. Đối với hộp kiểm bootstrap tự động thêm.

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.