У меня есть список с флажком и некоторым текстом (например, почтовый ящик электронной почты). Я хочу проверить/снять флажок, когда я нажимаю в любом месте элемента списка (строки). Я использовал следующий код для события щелчка строки:
$(this).find(".cbx input").attr('checked', true);
В первый раз он показывает установленный флажок. Но когда я нажимаю, выберите его в следующий раз, когда значение флажка отмечено = "проверено" обновления в html-коде (я проверил через firebug), но флажок не отображается, как отмечено.
С помощью .attr() вы устанавливаете значение атрибута в дереве DOM. В зависимости от браузера, версии браузера и версии jQuery (особенно 1.6) это не всегда имеет желаемый эффект.
С .prop() вы управляете свойством (в данном случае "checked state" ). Я настоятельно рекомендую использовать .prop() в вашем случае, поэтому следующее будет правильно переключаться:
$(this).find(".cbx input").prop('checked', true);
Для получения дополнительной информации см. документацию .prop().
Почти правильно, просто используйте "checked" вместо true:
$(this).find(".cbx input").attr('checked', 'checked');
Обновление: альтернативно, вы можете использовать это с более новыми версиями JQuery:
$(this).find(".cbx input").prop('checked', true);
Легко, решение состоит в том, чтобы использовать $ ('xxxxxx') .prop ('флажок', true) или false Test OK в Jquery 1.11.x.
ура
ПРИМЕР ПОЛНОГО ДЕМО КОДА
Примеры: (отметьте флажок 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>
Пример: (Code 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);
}
});
ничто изначально не работало для меня в хроме, хотя оно отлично работало в мозилле. Позже выяснилось, что пользовательский стиль 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 всегда работает.