[英]JQuery is changing checkbox value but the checkbox is not displaying as checked
我有一個帶有復選框和一些文本的列表(如電子郵件的收件箱)。 當我單擊列表項(行)上的任意位置時,我想檢查/取消選中該復選框。 我在行的click事件上使用了以下代碼:
$(this).find(".cbx input").attr('checked', true);
這是第一次顯示選中的復選框。 但是當我點擊下一次選中它時,復選框的值=“已檢查”html代碼中的更新(我通過firebug檢查),但復選框沒有顯示為已選中。
幾乎是正確的,只需使用'checked'而不是true:
$(this).find(".cbx input").attr('checked', 'checked');
更新:或者,您可以在較新的JQuery版本中使用它:
$(this).find(".cbx input").prop('checked', true);
很簡單,解決方案是在Jquery 1.11.x中使用$('xxxxxx')。 prop ('checked', true )或false Test OK。
干杯
完整的演示代碼示例
示例:( 表格的代碼JavaScript復選框)
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'));
});
}
示例:( 表格的代碼HTML復選框)
<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>
示例:( 代碼ComponentHTML使用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>
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);
}
});
雖然它在mozilla中運行良好,但最初沒有任何東西在chrome中工作。 后來發現自定義CSS樣式導致復選標記不可見。
這個解決方案對我不起作用(即用prop設置檢查狀態)。
$("#checkbox-reminder").prop("checked", true);
雖然基礎狀態始終正確更新,但顯示將無法正確重繪。
這可以用。
$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');
有關詳細信息,請參閱此主題 。
$("[id*='" + value + "'] input").prop('checked', false);
attr
也有效(但僅限第一次)但是prop
始終有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.