JQuery đang thay đổi giá trị hộp kiểm nhưng hộp kiểm không hiển thị khi được chọn

Question

Tôi có danh sách có hộp kiểm và một số văn bản (như hộp thư đến của email). Tôi muốn kiểm tra/bỏ chọn hộp kiểm khi tôi nhấp vào bất kỳ đâu trên mục danh sách (hàng). Tôi đã sử dụng mã sau đây trên sự kiện nhấp chuột của hàng:

$(this).find(".cbx input").attr('checked', true); 

Lần đầu tiên, hộp này sẽ hiển thị hộp kiểm đã chọn. Nhưng khi tôi nhấp vào chọn nó lần sau giá trị của hộp kiểm được kiểm tra = "kiểm tra" cập nhật trong mã html (tôi kiểm tra thông qua firebug) nhưng hộp kiểm không hiển thị như kiểm tra.

Answer 1

Với .attr() bạn thiết lập giá trị của một thuộc tính trong cây DOM. Tùy thuộc vào trình duyệt, phiên bản trình duyệt và phiên bản jQuery (đặc biệt là 1.6), điều này không phải lúc nào cũng có hiệu quả mong muốn.

Với .prop(), bạn thao tác thuộc tính (trong trường hợp này là 'trạng thái đã chọn'). Tôi khuyên bạn sử dụng .prop() trong trường hợp của bạn, vì vậy sau đây sẽ chuyển đổi một cách chính xác:

$(this).find(".cbx input").prop('checked', true); 

Để biết thêm thông tin, vui lòng tham khảo documentation of .prop().

Answer 2

Gần đúng, chỉ cần sử dụng 'kiểm tra' thay vì đúng:

$(this).find(".cbx input").attr('checked', 'checked'); 

Cập nhật: Ngoài ra, bạn có thể sử dụng với các phiên bản JQuery mới hơn:

$(this).find(".cbx input").prop('checked', true); 

Answer 3

$("[id*='" + value + "'] input").prop('checked', false); 

attr cũng làm việc (nhưng lần đầu tiên chỉ) Nhưng prop luôn hoạt động.

Answer 4

useing **.prop()** it worked for me ! 

$(document).on("click",".first-table tr",function(e){ 
if($(this).find('input:checkbox:first').is(':checked')) 
{ 
    $(this).find('input:checkbox:first').prop('checked',false); 
}else 
{ 
    $(this).find('input:checkbox:first').prop('checked', true); 
} 
}); 

Answer 5

không có gì ban đầu làm việc cho tôi trong chrome mặc dù nó hoạt động tốt trong mozilla. Sau đó phát hiện ra rằng kiểu dáng CSS tùy chỉnh khiến dấu kiểm không hiển thị.

Answer 6

dễ dàng, giải pháp là sử dụng $ ('xxxxxx') .pop ('kiểm tra', đúng) hoặc sai thử OK trong Jquery 1.11.x.

Cheers

ĐẦY ĐỦ DEMO mã ví dụ

Ví dụ: (Mã JavaScript hộp kiểm cho một bảng)

function checkswich() { 
     if ($('#checkbox-select').is(':checked') == true) { 
      selectTodo(); 
     } else { 
      deSelectTodo(); 
     } 
    } 
    function selectTodo() { 
     //$('#tabla-data input.ids:checkbox').attr('checked', 'checked'); 
     $('#tabla-data input.ids:checkbox').prop('checked', true); 
    } 
    function deSelectTodo() { 
     //$('#tabla-data input.ids:checkbox').removeAttr('checked', 'checked'); 
     $('#tabla-data input.ids:checkbox').prop('checked', false); 
    } 
    function invetirSelectTodo() { 
     $("#tabla-data input.ids:checkbox").each(function (index) { 
      //$(this).attr('checked', !$(this).attr('checked')); 
      $(this).prop('checked', !$(this).is(':checked')); 
     }); 
    } 

Ví dụ: (Mã HTML hộp kiểm cho một bảng)

  <table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed"> 
       <thead> 
        <tr> 
         <th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th> 
         <th>Engine</th> 
         <th><a href="#" class="">Browser</a></th> 
         <th class="td-actions text-center" style="width: 8%;">Acciones</th> 
        </tr> 
       </thead> 
       <tbody id="tabla-data" class="checkbox-data"> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
       </tbody> 
      </table> 

Ví dụ: (Mã ComponentHTML sử dụng JavaScript)

<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" > 
<input type="hidden" name="accion" id="accion"> 

<div class="btn-group"> 
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span> 
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true" 
     aria-expanded="false"> 
    <span class="caret"></span> 
    <span class="sr-only">Options</span> 
</button> 
<ul class="dropdown-menu"> 
    <li><a href="#" onclick="accion()">Action Demo</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#" onclick="selectTodo()">Select All</a></li> 
    <li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li> 
    <li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li> 
</ul> 

Answer 7

Giải pháp này không làm việc cho tôi (tức. Thiết lập trạng thái đã chọn với prop).

$("#checkbox-reminder").prop("checked", true); 

Trong khi trạng thái cơ bản luôn được cập nhật chính xác, màn hình sẽ không vẽ lại đúng cách.

Điều này có thể được giải quyết bằng.

$("#checkbox-reminder").prop("checked", true).checkboxradio(); 
$('#checkbox-reminder').checkboxradio('refresh'); 

Xem trang này thread để biết thêm thông tin.